使用JavaScript操作剪贴板会破坏格式化

时间:2012-07-20 17:51:51

标签: javascript jquery html javascript-events clipboard

我正在编写一个脚本,用于将归因链接附加到用户的剪贴板 - 类似于您从Tynt看到的功能。

从功能上讲,下面的脚本工作正常,只是它删除了换行符和格式。无论如何要保留 - 至少 - 换行?

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

}

1 个答案:

答案 0 :(得分:1)

经过一番研究后,我弄清楚这里发生了什么,并做了修复以保留换行符。看起来复制选择时,换行符表示为\ n。所以,我添加了一些逻辑来用HTML中断替换所有\ n实例,这解决了这个问题。这是完整的更新脚本。

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;