javascript - 循环遍历 html 元素时替换粘贴中的文本

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，然后将其从粘贴发送到文本区域。

Answer 1

aTags foreach 目前不执行任何操作。您需要创建一个新的文本节点，并用它替换现有的 anchor 标记。

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

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