在 Javascript 中复制并粘贴带有链接但不隐藏 styles 等的富文本

Question

我正在构建一个 chrome 扩展，它依赖于从页面中抓取选定的文本并稍后显示。

我想要的是复制一段这样的文本：

<span class="padding:0px;>Hello this is a link <a href="/somewhere">somewhere</a></span>

并返回这个：

Hello this is a link <a href="/somewhere">somewhere</a>

即我想抓取文本，以及链接、LI、UL、Blockquote 等内容，但不抓取隐藏样式等。

我目前使用的function是：

function getSelectionText() {
var text = "";
if (window.getSelection) {

  // from here: https://gist.github.com/gleuch/2475825
  // selection range
  var range = window.getSelection().getRangeAt(0);

  // plain text of selected range (if you want it w/o html)
  var plaintext = window.getSelection();

  // document fragment with html for selection
  var fragment = range.cloneContents();

  // make new element, insert document fragment, then get innerHTML!
  var div = document.createElement('div');
  div.appendChild( fragment.cloneNode(true) );

  // your document fragment to a string (w/ html)! (yay!)
  var text = div.innerHTML;
  console.log(text);


} else if (document.selection && document.selection.type != "Control") { // think this is for IE?
text = document.selection.createRange().text;
}
return text;
}; 

这会抓取选择的完整节点片段，但有时会抓取周围的跨度、div、styles 等。

中间有没有？ 即不仅仅是原始文本，而不是完整的 HTML？

Answer 1

如果您可以枚举要删除的标签，请使用以下 function 将其删除：

function removeTags(tags, html) {
  var els = $(html); // Transform html in a jQuery object
  for (var tag of tags) { // For each tag to be removed
    var el = els.find(tag);
    while (el.length) { // While the tag is found
      el.replaceWith(function() {
        return this.innerHTML; // Remove the tag
      });
      el = els.find(tag); // Find next instance
    }
  }
  return els.html();
}

像这样称呼它：

const tags = ["div", "p"]; // List of tags to be removed
var result = removeTags(tags, html);

 function getHTMLOfSelection() { var range; if (document.selection && document.selection.createRange) { range = document.selection.createRange(); return range.htmlText; } if (window.getSelection) { var selection = window.getSelection(); if (selection.rangeCount > 0) { range = selection.getRangeAt(0); var clonedSelection = range.cloneContents(); var div = document.createElement('div'); div.appendChild(clonedSelection); return div.outerHTML; } } return ''; } function removeTags(tags, html) { var els = $(html); for (var tag of tags) { var el = els.find(tag); while (el.length) { el.replaceWith(function() { return this.innerHTML; }); el = els.find(tag); } } return els.html(); } function process() { var tags = ["div", "p"]; document.getElementById("output1").value = getHTMLOfSelection(); document.getElementById("output2").value = removeTags(tags, getHTMLOfSelection()); }

 div, p { display: inline-block }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div><p>Testing...</p>This <div style="color:blue">text to <a href="test">test</a> the</div> selection on.<div style="color:red">Another div</div></div><br> <button onclick="process()">Get selected HTML</button> HTML: <br> <textarea id="output1" rows="3" cols="60"></textarea> <br> HTML without tags:<br> <textarea id="output2" rows="3" cols="60"></textarea>