使用JavaScript操作剪贴板会中断格式化 [英] Manipulating the clipboard with JavaScript breaks formatting
本文介绍了使用JavaScript操作剪贴板会中断格式化的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在编写一个脚本来追加归属链接到用户的剪贴板 - 类似于您从Tynt中看到的功能。
在功能上，下面的脚本工作正常，除了它是删除换行符和格式。无论如何要保存 - 至少是 - 换行符？
函数addLinktoCopy（）{
//定义跟踪参数
var trackingparam =source = copypaste;
//将文档主体设置为body_element变量
var body_element = document.getElementsByTagName（'body'）[0];
//创建一个选择变量来存储复制值
var selection;
//用用户选择的副本填充选择变量
selection = window.getSelection（）;
//创建一个变量来存储选择长度
var selectionlength;
//将选择内容转换为字符串并获取字符串的长度
selectionlength = selection.toString（）。length
//如果selectionlength>> 34，然后追加追踪
（选择长度> 34）{
//将当前页面的URL设置为变量
var page = document.location.href;
//创建分隔符变量
var seperator;
//创建一个locationURL变量来存储URL和相关的跟踪参数
var locationURL;
//检查URL是否已经包含跟踪参数
//如果URL不包含跟踪代码，则将其附加到结尾
if（page .indexOf（trackingparam）== -1）{
//检查URL是否已经包含一个？其中
if（page.indexOf（？）！= -1）{
//如果？存在于URL字符串中，将分隔符变量设置为&
seperator =&;
}
else {
//如果？没有出现在URL字符串中，请将分隔符变量设置为？
seperator =？;
}
//使用URL +跟踪代码设置locationURL变量$ b $ locationURL = document.location.href + seperator + trackingparam;
}
// Othwerise，跟踪代码已存在于URL字符串中，因此不会追加任何
else {
//使用URL设置locationURL变量，如
locationURL = document.location.href;
}
//通过编辑副本，网址，分隔符和网址跟踪参数构建链接页面
var pagelink =< br />< ; br />更多阅读：+ locationURL;
//用用户选择和页面链接创建新变量
var copytext =选择+ pagelink;
//创建一个新的div并添加关联的样式并隐藏它离开页面
var newdiv = document.createElement（'div'）;
//将新的div附加到文档
body_element.appendChild（newdiv）;
//从新的（隐藏的）div中选择文本
newdiv.innerHTML = copytext;
//将剪贴板值替换为新选择+链接值
selection.selectAllChildren（newdiv）;
}
//否则，选择长度<= 34，因此不做任何操作
//我们不会追加任何副本或URL到用户的选择
解决方案
研究，我想出了这里发生了什么，并且修复了保留换行符。它看起来像复制选择时，换行符被表示为\ n。所以，我添加了一些逻辑来将所有\ n个实例替换为HTML格式，并解决了这个问题。这里是完整的更新脚本。
函数addLinktoCopy（）{
//定义跟踪参数
var trackingparam =源= copypaste;
//将文档主体设置为body_element变量
var body_element = document.getElementsByTagName（'body'）[0];
//创建一个选择变量来存储复制值
var selection;
//创建一个选区以将选区存储为文本字符串
var selectedText;
//用用户选择的副本填充选择变量
selection = window.getSelection（）;
//使用用户选择的副本将字符串存储为selectedText变量
selectedText = selection.toString（）;
//创建一个变量来存储选择长度
var selectionlength;
//将选择内容转换为字符串并获取字符串的长度
selectionlength = selection.toString（）。length
//如果selectionlength>> 34并且不以http：//开始，然后追加跟踪
//如果选择以http：//开头，则可能是一个URL，这可能会导致在粘贴到（（选择长度> 34）&（selectedText.substring（0,7）！=http：//））{
//设置地址栏
//设置当前页面的URL作为变量
var page = document.location.href;
//创建分隔符变量
var seperator;
//创建一个locationURL变量来存储URL和相关的跟踪参数
var locationURL;
//检查URL是否已经包含跟踪参数
//如果URL不包含跟踪代码，则将其附加到结尾
if（page .indexOf（trackingparam）== -1）{
//检查URL是否已经包含一个？其中
if（page.indexOf（？）！= -1）{
//如果？存在于URL字符串中，将分隔符变量设置为&
seperator =&;
}
else {
//如果？没有出现在URL字符串中，请将分隔符变量设置为？
seperator =？;
}
//使用URL +跟踪代码设置locationURL变量$ b $ locationURL = document.location.href + seperator + trackingparam;
}
// Othwerise，跟踪代码已存在于URL字符串中，因此不会追加任何
else {
//使用URL设置locationURL变量，如
locationURL = document.location.href;
}
//通过编辑副本，网址，分隔符和网址跟踪参数构建链接页面
var pagelink =< br />< ; br />更多阅读：+ locationURL;
//用用户选择和页面链接创建新变量
var copytext =选择+ pagelink;
//用HTML分隔符标记替换换行符/ n以准确保存粘贴格式化
var copytext = copytext.replace（/ \\
/ g，'< br /> ;'）;
//创建一个新的div并添加关联的样式并隐藏它离开页面
var newdiv = document.createElement（div）;
//将新的div附加到文档
body_element.appendChild（newdiv）;
//从新的（隐藏的）div中选择文本
newdiv.innerHTML = copytext;
//将剪贴板值替换为新选择+链接值
selection.selectAllChildren（newdiv）;
}
//否则，选择长度<= 34，因此不做任何操作
//我们不会追加任何副本或URL到用户的选择
}
//当用户从页面
复制文本时执行addLinktoCopy函数document.oncopy = addLinktoCopy;
I am writing a script to append attribution linking to a user's clipboard -- similar to the functionality that you see from Tynt.
Functionally, the script below is working fine, except that it is removing line breaks and formatting. Is there anyway to preserve -- at the very least -- the line breaks?
function addLinktoCopy() {
// Define tracking parameter
var trackingparam = "source=copypaste";
// Set document body as body_element variable
var body_element = document.getElementsByTagName('body')[0];
// Create a selection variable to store copied value
var selection;
// Populate selection variable with user's selected copy
selection = window.getSelection();
// Create a variable to store the selection length
var selectionlength;
// Convert the selection to a string and get the string's length
selectionlength = selection.toString().length
// If the selectionlength is >34, then append tracking
if ( selectionlength > 34 ){
// Set the current page's URL as a variable
var page = document.location.href;
// Create a seperator variable
var seperator;
// Create a locationURL variable to store the URL and associated tracking parameters
var locationURL;
// Check to see if the URL already contains the tracking paramater
// If the URL doesn't contain the tracking code, append it to the end
if ( page.indexOf(trackingparam) == -1 ) {
// Check to see if the URL already includes a ? in it
if ( page.indexOf("?") != -1 ) {
// If ? is present in the URL string, set seperator variable to &
seperator = "&";
}
else {
// If ? is not present in the URL string, set seperator variable to ?
seperator = "?";
}
// Set locationURL variable with URL + tracking code
locationURL = document.location.href + seperator + trackingparam;
}
// Othwerise, the tracking code already exists in the URL string, so append nothing
else {
// Set the locationURL variable with the URL as is
locationURL = document.location.href;
}
// Build link to page with editorial copy, URL, seperator, and URL tracking parameters
var pagelink = "<br/><br/>Read more at: "+ locationURL;
// Create new variable with user's selection and page link
var copytext = selection + pagelink;
// Create a new div and add associated styling and hide it off the page
var newdiv = document.createElement('div');
// Append new div to document
body_element.appendChild(newdiv);
// Select text from the new (hidden) div
newdiv.innerHTML = copytext;
// Replace clipboard values with new selection + link value
selection.selectAllChildren(newdiv);
}
// Otherwise, selectionlength <= 34, so do nothing
// We are not appending any copy or URLs to the user's selection
}
解决方案
After a bit of research, I figured out what was going on here, and made a fix to preserve the line breaks. It looks like when copying the selection, line breaks were being represented as \n. So, I added some logic to replace all \n instances with an HTML break
, and this resolved the issue. Here's the updated script in its entirety.
function addLinktoCopy() {
// Define tracking parameter
var trackingparam = "source=copypaste";
// Set document body as body_element variable
var body_element = document.getElementsByTagName('body')[0];
// Create a selection variable to store copied value
var selection;
// Create a selection to store the selection as a text string
var selectedText;
// Populate selection variable with user's selected copy
selection = window.getSelection();
// Populate selectedText variable with the user's selected copy stored as a string
selectedText = selection.toString();
// Create a variable to store the selection length
var selectionlength;
// Convert the selection to a string and get the string's length
selectionlength = selection.toString().length
// If the selectionlength is >34 and doesn't start with "http://", then append tracking
// If the selection starts with "http://", it's likely a URL, which could provide for a bad experience when pasting into an address bar
if ( (selectionlength > 34) && (selectedText.substring(0,7) != "http://") ){
// Set the current page's URL as a variable
var page = document.location.href;
// Create a seperator variable
var seperator;
// Create a locationURL variable to store the URL and associated tracking parameters
var locationURL;
// Check to see if the URL already contains the tracking paramater
// If the URL doesn't contain the tracking code, append it to the end
if ( page.indexOf(trackingparam) == -1 ) {
// Check to see if the URL already includes a ? in it
if ( page.indexOf("?") != -1 ) {
// If ? is present in the URL string, set seperator variable to &
seperator = "&";
}
else {
// If ? is not present in the URL string, set seperator variable to ?
seperator = "?";
}
// Set locationURL variable with URL + tracking code
locationURL = document.location.href + seperator + trackingparam;
}
// Othwerise, the tracking code already exists in the URL string, so append nothing
else {
// Set the locationURL variable with the URL as is
locationURL = document.location.href;
}
// Build link to page with editorial copy, URL, seperator, and URL tracking parameters
var pagelink = "<br/><br/>Read more at: "+ locationURL;
// Create new variable with user's selection and page link
var copytext = selection + pagelink;
// Replace line breaks /n with HTML break tags to quasi-preserve formatting on paste
var copytext = copytext.replace(/\n/g, '<br />');
// Create a new div and add associated styling and hide it off the page
var newdiv = document.createElement("div");
// Append new div to document
body_element.appendChild(newdiv);
// Select text from the new (hidden) div
newdiv.innerHTML = copytext;
// Replace clipboard values with new selection + link value
selection.selectAllChildren(newdiv);
}
// Otherwise, selectionlength <= 34, so do nothing
// We are not appending any copy or URLs to the user's selection
}
// Execute addLinktoCopy function when user copies text from page
document.oncopy = addLinktoCopy;
这篇关于使用JavaScript操作剪贴板会中断格式化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
