复制按钮保留换行符

29 浏览
0 Comments

复制按钮保留换行符

我有一个非常基本的Javascript代码，可以在点击按钮时复制文本。我的问题是它不能保留换行符：\n

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

\n我希望能够在上述代码中添加一些内容，以避免对网站进行大规模修改。\n我在其他帖子上看到过一些方法，例如：\n

post.innerHTML = post.innerHTML.replace(/\n/g, '\n');

\n理论上来说这应该能行（我认为），但我对Javascript不太擅长。\n有什么建议吗？\n谢谢。

0

2 答案

0 Comments

问题原因：在适应copyToClipboard函数时，原始的replace函数用于从字符串中剥离HTML标签。然而，原始的正则表达式(/<\/?[^>]+>/g)在剥离HTML时有一个(>|$)的判断，但我们不明白为什么要检查$，因为它意味着$是HTML标签的一部分。在我们的应用中，HTML的要求高度限制，主要是包含<br>和<b>标签，因此不适用于Stack Overflow上的评论中一般关于使用正则表达式解析HTML的反对意见。

解决方法：我们根据需求对copyToClipboard函数进行了适应，并做出以下更改：

- 将输入更改为textarea，以便传递换行符；

- 将text()函数更改为html()函数，以便传递HTML；

- 使用正则表达式替换每个HTML的br标签为换行符；

- 使用另一个正则表达式剥离剩余的HTML。我们的应用中的HTML只应包含<b>和<br>标签，所以简单的正则表达式应该可以处理，并且可以处理可能存在的其他标签。

以下是我们适应后的函数，包含注释：

// 注意: 原始的replace函数用于从https://stackoverflow.com/questions/5002111 ReactiveRaven中剥离HTML标签。
// 但是，我们将关闭标签的(>|$)替换为>，因为我们不明白为什么要检查$，因为它意味着$是HTML标签的一部分。
// 我们的要求极大地限制了HTML的内容，主要包含<br>和<b>标签，因此一般关于使用正则表达式解析HTML的反对意见
// （例如https://stackoverflow.com/questions/1732348社区Wiki）不适用。
// 顺便说一下，那个页面非常有趣！
function copyToClipboard(element)
{
    var $temp = $("<textarea>");
    $("body").append($temp);
    var x = $(element).html().trim().replace(/<br>/g, '\n').replace(/<\/?[^>]+>/g, '');
    $temp.val(x).select();
    document.execCommand("copy");
    $temp.remove();
}

另外，如果有人知道为什么引用页面的正则表达式中有我们更改为>的(>|$)，我们将非常感谢了解为什么我们移除的美元符号是必需的的理解。

0
0 Comments

问题出现的原因是因为<input>元素不能保留换行符，可以使用<textarea>元素代替。由于HTML中可能包含<br>元素而不是换行字符，建议使用jQuery在每个<br>之前添加\r\n。

解决方法如下：

function copyToClipboard(element) {
  var text = $(element).clone().find('br').prepend('\r\n').end().text()
  element = $('<textarea>').appendTo('body').val(text).select()
  document.execCommand('copy')
  element.remove()
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p contenteditable="true">Type to edit <br> this text</p>
<button onclick="copyToClipboard('p')">Copy to Clipboard</button>

然而，这种方法有一个问题...在文本中插入的标签也会导致换行。可以在.find('br')之前添加.find('ref.glowingtext').remove().end()来忽略这种情况。

太棒了！非常感谢！

0