在通过html元素循环时替换粘贴中的文本 [英] replacing text from a paste when looping over html elements

问题描述

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

基本上，我希望能够复制东西，从文档写入到我的网站上的textarea，而无需在原始文档中手动写入BBCode标签（因为它很杂乱，无法进行校对）。

感谢帮助这里调整正则表达式忽略链接HTML中的任何其他内容标签我主要在那里，但我坚持用原始文本替换找到的标签。

这是我的：

  function fragmentFromString（strHTML）{
 return document.createRange（）。createContextualFragment（strHTML）; $（'）'
 $ b' .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.comstyle = 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;>链接测试< / span>< / a> 
  

预计将被替换为：

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

因此，我希望HTML代替原来的文本中的BBCode，然后通过粘贴将其发送到textarea。

解决方案

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

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

I am trying to replace html links (and eventually other elements) with bbcode when a user does a paste from a document (like gdocs or libre office). So we are dealing with rich html already formatted (which is why it needs to copy HTML and not text).

Essentially, I want to be able to copy stuff pre-written from a document into a textarea on my website without having to manually write BBCode tags in the original document (as it's messy for proof-reading).

Thanks to the help here Adjust regex to ignore anything else inside link HTML tags I have gotten mostly there, but I am stuck on replacing the found tags with the original text.

Here's what I have:

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

You can see it loops over the found a tags and I am essentially trying to replace them from the original text with the new stuff.

Here's an example of the type of content that could be pasted (this is a single link from google docs):

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

Expected to be replaced with:

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

So I want that HTML replaced, with the BBCode within the original text that's then sent to the textarea from the paste.

解决方案

The aTags foreach currently does nothing. You need to create a new text node, and replace the existing anchor tag with it.

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

This will replace every a tag into the given text.

这篇关于在通过html元素循环时替换粘贴中的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！