使用JavaScript處理剪貼板中斷格式化

Question

我正在編寫一個腳本來追加歸屬鏈接到用戶的剪貼板 - 類似於您從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 

} 

Answer 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;