Question

当用户从文档（如gdocs或libre office）粘贴时，我试图用bbcode替换html链接（最终是其他元素）。所以我们正在处理已经格式化的丰富html（这就是为什么它需要复制HTML而不是文本）。

基本上，我希望能够将从文档中预先写好的内容复制到我网站上的文本区域，而无需在原始文档中手动编写BBCode标记（因为它对于校对来说很麻烦）。

感谢这里的帮助Adjust regex to ignore anything else inside link HTML tags我大部分都在那里，但我仍然坚持用原始文本替换找到的标签。

这就是我所拥有的：

function fragmentFromString(strHTML) {
  return document.createRange().createContextualFragment(strHTML);
}

  $('textarea').on('paste',function(e) {
    e.preventDefault();
    var text = (e.originalEvent || e).clipboardData.getData('text/html') || prompt('Paste something..');
    var fragment = fragmentFromString(text);
    var aTags = Array.from(fragment.querySelectorAll('a'));

    aTags.forEach(a => {
      text = text.replace(a, "[url="+a.href+"]"+a.textContent+"[/url]");
    });

    window.document.execCommand('insertText', false, text);
});

你可以看到它在找到的a标签上循环，我基本上试图用新的东西用原始文本替换它们。

以下是可以粘贴的内容类型的示例（这是来自Google文档的单个链接）：

<a href="https://www.test.com" style="text-decoration:none;"><span style="font-size:14.666666666666666px;font-family:Arial;color:#1155cc;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Link test</span></a>

预计将替换为：

[url=https://www.test.com]Link test[/url]

所以我希望用原来的文本中的BBCode替换HTML，然后从粘贴中发送到textarea。

Answer 1

aTags foreach目前什么也没做。您需要创建一个新的文本节点，并用它替换现有的锚标记。

aTags.forEach(a => {
  var new_text = document.createTextNode("[url=" + a.href + "]" + a.textContent + "[/url]");
  a.parentNode.insertBefore(new_text, a);
  a.parentNode.removeChild(a);
});

window.document.execCommand('insertText', false, text.innerText);

这会将每个标签替换为给定的文本。

循环遍历html元素时从粘贴中替换文本

1 个答案: