忽略 JavaScript 副本上的子元素

Question

我有以下 HTML：

<li class="checked"><p>This<em>I don't need this</em></p>

<input type="checkbox"></li>

<li class="unchecked"><p>That</p>

<input type="checkbox"></li>

<button onclick="copyText()">Copy</button>

<div id="output"></div>

以及以下 Javascript，它复制checked剪贴板中类的所有元素：

function copyText(){

  var outputText = "";

  var items= document.getElementsByClassName('unchecked');

  for(var i = 0; i < items.length; i++) {

    outputText += items[i].innerText+"\n";

  }

  var output = document.getElementById('output');

  output.innerText = outputText;

  var range = document.createRange();

  range.selectNodeContents(output);

  var selection = window.getSelection();

  selection.removeAllRanges();

  selection.addRange(range);

  document.execCommand('copy');

  output.style.display = 'none';

}

完美地工作，直到它还包括<em>我不想要的。我试图从内部排除所有子元素，checked但这根本没有做任何事情......我无法更改的类，<em>因为我正在使用 Jekyll markdown 并且它添加了无类（我想要不要对我的输入文件使用内联属性）。

Answer 1

用代码补充 JS 以清除不需要的内容。只要所述内容包含在可以由 css 选择器提取的已知标签中（在给定的情况下：），此方法就可以工作em。display消隐是通过将不需要的元素的 Css 属性临时设置为 来实现的none。测试时没有明显的效果（又名闪烁）。在示例中，为了演示目的，已将一个附加子项（以粗体显示）添加到标记为已检查的内容中。function copyText(){&nbsp; &nbsp; var outputText = "";&nbsp; &nbsp; var items= document.getElementsByClassName('checked');&nbsp;&nbsp;&nbsp; &nbsp; // BEGIN - supplement to the original code&nbsp; &nbsp; Array.from(items).forEach ( pnode => {&nbsp; &nbsp; &nbsp; &nbsp; // Complement this selector to remove whatever is unwanted.&nbsp; &nbsp; &nbsp; &nbsp; // '*' removes all child elements.&nbsp; &nbsp; &nbsp; &nbsp; let nodelist_toBlank = pnode.querySelectorAll('em')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; // Blank the unwanted content, saving the original Css property value&nbsp; &nbsp; &nbsp; &nbsp; Array.from(nodelist_toBlank).forEach ( pnode_toBlank => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pnode_toBlank.setAttribute ( 'data-style-display', pnode_toBlank.style.display );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pnode_toBlank.style.display = 'none';&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; // Add data from node to the string buffer. Elements with Css 'display' property set to 'none' are skipped&nbsp; &nbsp; &nbsp; &nbsp; outputText += pnode.innerText+"\n";&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; // Unblank. Restore the original Css property value&nbsp; &nbsp; &nbsp; &nbsp; Array.from(nodelist_toBlank).forEach ( pnode_toRestore => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pnode_toRestore.style.display = pnode_toRestore.getAttribute ( 'data-style-display' );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pnode_toRestore.removeAttribute ( 'data-style-display' );&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });&nbsp; &nbsp; // END - supplement to the original code&nbsp; &nbsp; //&nbsp; &nbsp; // Original loop deleted!&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; var output = document.getElementById('output');&nbsp; &nbsp; output.innerText = outputText;&nbsp; &nbsp; var range = document.createRange();&nbsp; &nbsp; range.selectNodeContents(output);&nbsp; &nbsp; var selection = window.getSelection();&nbsp; &nbsp; selection.removeAllRanges();&nbsp; &nbsp; selection.addRange(range);&nbsp; &nbsp; document.execCommand('copy');&nbsp; &nbsp; output.style.display = 'none';}<li class="checked"><p>This<em>I don't need this</em><b>I want this</b></p><input type="checkbox"></li><li class="unchecked"><p>That</p><input type="checkbox"></li><button onclick="copyText()">Copy</button><div id="output"></div>评论根据MDN，execCommand是一个过时的功能，不应再使用。

Answer 2

更新循环以包含 if 语句：var em = document.querySelector('em');&nbsp;for(var i = 0; i < items.length; i++) {&nbsp; &nbsp; if (em,items[i].contains(em)){&nbsp; &nbsp; &nbsp; &nbsp; outputText += items[i].innerText.replace(em.innerText, "")+"\n";&nbsp; &nbsp; &nbsp; &nbsp; console.log(em.innerText);&nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; &nbsp; outputText += items[i].innerText+"\n";&nbsp; &nbsp; }}