使用折线复制到剪贴板

Question

我想将文本复制到剪贴板,但是要换行.

问题:

如果您点击代码段中的按钮并粘贴到记事本中,这就是您要获得的内容:

名称:testSurname:testEmail:test@gmail.comAddress:testCity:testCountry:nullAd类别:testPlan:null网站:公司名称:testΜήνυμα:test

我想要的是:

如果可能,我希望在换行符中复制文本.与复制时相同:

姓名:测试
姓:测试
邮箱: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>用以下css规则替换\n并\r\n添加以下css规则:white-space:pre-wrap;没有任何成功的迹象.

Answer 1

你的代码有一些问题.

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

如果您想保留<br>新行,则需要使用.html()并手动解析文本.

第二个问题是你使用<input>标签.<input>标签只是单行,所以你不能有任何新行.你需要<textarea>用于转换.

最后一个问题如上所述,您也应该使用\r\nWindows用户.

我使用工作版更新了您的代码段.

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 2

非jQuery解决方案,只需将带换行符的字符串复制到剪贴板

为清晰起见,请参阅代码注释.

function copyStringWithNewLineToClipBoard(stringWithNewLines){

    // Step 1: create a textarea element.
    // It is capable of holding linebreaks (newlines) unlike "input" element
    const myFluffyTextarea = document.createElement('textarea');

    // Step 2: Store your string in innerHTML of myFluffyTextarea element        
    myFluffyTextarea.innerHTML = stringWithNewLines;

    // Step3: find an id element within the body to append your myFluffyTextarea there temporarily
    const parentElement = document.getElementById('any-id-within-any-body-element');
    parentElement.appendChild(textarea);

    // Step 4: Simulate selection of your text from myFluffyTextarea programmatically 
    myFluffyTextarea.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 fluffy textarea element
    parentElement.removeChild(myFluffyTextarea);
    }