使用断线复制到剪贴板

Question

我想将文本复制到剪贴板，但要换行。

问题：

如果您单击代码段中的按钮并粘贴到记事本中，您将得到以下结果：

Name: testSurname: testEmail: test@gmail.comAddress: testCity: testCountry: nullAd Category: testPlan: nullWebsite: Company name: testΜήνυμα: test

我想要的：

如果可能的话，我想在换行符中复制文本。和复制时一样：

Name: test
Surname: test
Email: test@gmail.com
...

function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
}

$( "#FailCopy" ).click(function() {
  alert("Well done! div #error-details has been copy to your clipboard, now paste it in the notepad or email!");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!--text that i want to copy-->
    <h2>Div #error-details: the text I want to copy to clipboard:</h2>
    <er id="error-details">Name: test<br>Surname: test<br>Email: test@gmail.com<br>Address: test<br>City: test<br>Country: null<br>Ad Category: test<br>Plan: null<br>Website: <br>Company name: test<br>Μήνυμα: test</er>

    <br><br>
    
    <button id="FailCopy" type="button"  
     onclick="copyToClipboard('er#error-details')">Copy div to clipboard</button>

我还尝试将 <br> 替换为 \n 和 \r\n，方法是在我的 div 中添加以下 css 规则：white-space:pre-wrap; 没有任何成功的迹象。

Answer 1

您的代码可能运行良好，但记事本无法处理 Unix 的 \n 换行符，它只能处理 \r\n，这就是您看不到它们的原因。

请下载更高级的编辑器（如 Notepad++，https://notepad-plus-plus.org）并尝试将其粘贴到那里。不仅如此，它还有许多其他非常酷的功能，如语法高亮显示、宏和插件，因此值得将它用于更多目的。

如果您想让换行符在 MS 应用程序中工作，您需要在复制之前使用此行替换换行符：

$temp = $temp.replace(/\n/g, "\r\n");

要在 HTML 中打印，您需要将 \n 替换为
，如下所示：

$temp = $temp.replace(/\n/g, "<br>");

Answer 2

您的代码有一些问题。

您代码中的第一个问题是 $(element).text()jquery text() 将您的代码从 html 中剥离，包括 <br> 标记。所以剪贴板文本中没有换行符，因为所有 html 换行符都被删除了..所以没有什么可以替换的。

如果您想将 <br> 保留为换行符，您需要使用 .html() 并更加手动地解析您的文本。

第二个问题是您使用了 <input> 标签。 <input> 标签只有单行，所以你不能在其中有任何换行符。您需要使用 <textarea> 进行转换。

最后一个问题如上，您也应该为 windows 用户使用 \r\n。

我用有效版本更新了您的代码段。

function copyToClipboard(element) {
  var $temp = $("<textarea>");
  var brRegex = /<br\s*[\/]?>/gi;
  $("body").append($temp);
  $temp.val($(element).html().replace(brRegex, "\r\n")).select();
  document.execCommand("copy");
  $temp.remove();
}

$( "#FailCopy" ).click(function() {
  alert("Well done! div #error-details has been copy to your clipboard, now paste it in the notepad or email!");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!--text that i want to copy-->
    <h2>Div #error-details: the text I want to copy to clipboard:</h2>
    <er id="error-details">Name: test<br>Surname: test<br>Email: test@gmail.com<br>Address: test<br>City: test<br>Country: null<br>Ad Category: test<br>Plan: null<br>Website: <br>Company name: test<br>Μήνυμα: test</er>

    <br><br>
    
    <button id="FailCopy" type="button"  
     onclick="copyToClipboard('er#error-details')">Copy div to clipboard</button>

Answer 3

有两处错误：

(1) 根据 text 的 jquery 文档：

The result of the .text() method is a string containing the combined text of all matched elements. (Due to variations in the HTML parsers in different browsers, the text returned may vary in newlines and other white space.)

他们的榜样，

<div class="demo-container">
    <div class="demo-box">Demonstration Box</div>
    <ul>
        <li>list item 1</li>
        <li>list <strong>item</strong> 2</li>
    </ul>
</div>

代码 $( "div.demo-container" ).text() 将产生：

Demonstration Box list item 1 list item 2

所以只需使用 html() 方法来获取 innerHTML。

(2) <input> 标签删除换行符。请改用 textarea。请参阅：了解更多信息。

希望这个尖晶石能奏效。

function copyToClipboard(element) {
  var $temp = $("<textarea>");
  $("body").append($temp);
  var html = $(element).html();
  html = html.replace(/<br>/g, "\n"); // or \r\n
  console.log(html);
  $temp.val(html).select();
  document.execCommand("copy");
  $temp.remove();
}

$( "#FailCopy" ).click(function() {
  alert("Well done! div #error-details has been copy to your clipboard, now paste it in the notepad or email!");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!--text that i want to copy-->
<h2>Div #error-details: the text I want to copy to clipboard:</h2>
<er id="error-details">Name: test<br>Surname: test<br>Email: test@gmail.com<br>Address: test<br>City: test<br>Country: null<br>Ad Category: test<br>Plan: null<br>Website: <br>Company name: test<br>Μήνυμα: test</er>

<br><br>
    
<button id="FailCopy" type="button"  
     onclick="copyToClipboard('er#error-details')">Copy div to clipboard</button>

Answer 4

非jQuery 简单复制带换行符的字符串到剪贴板的解决方案

为了清楚起见，请参阅代码注释。

    function copyStringWithNewLineToClipBoard(stringWithNewLines){

        // Step 1: create a textarea element.
        // It is capable of holding linebreaks (newlines) unlike "input" element
        const mySmartTextarea = document.createElement('textarea');
        
        // Step 2: Store your string in innerHTML of mySmartTextarea element        
        mySmartTextarea.innerHTML = stringWithNewLines;
        
        // Step3: find an id element within the body to append your mySmartTextarea there temporarily
        const parentElement = document.getElementById('any-id-within-any-body-element');
        parentElement.appendChild(mySmartTextarea);
        
        // Step 4: Simulate selection of your text from mySmartTextarea programmatically 
        mySmartTextarea.select();
        
        // Step 5: simulate copy command (ctrl+c)
        // now your string with newlines should be copied to your clipboard 
        document.execCommand('copy');

        // Step 6: Now you can get rid of your "smart" textarea element
        parentElement.removeChild(mySmartTextarea);
        }

现在只需复制粘贴这个非冗长的方法并添加您自己的评论，以便未来的开发人员管理您的代码。或者可能只是对此答案的引用。

function copyStringWithNewLineToClipBoard(stringWithNewLines){
    const mySmartTextarea = document.createElement('textarea');
    mySmartTextarea.innerHTML = stringWithNewLines;
    const parentElement = document.body.appendChild(mySmartTextarea);
    mySmartTextarea.select();
    document.execCommand('copy');
    parentElement.removeChild(mySmartTextarea);
    }

使用断线复制到剪贴板

Copy to clipboard with break line

javascript

clipboard

jquery

copy