忽略 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(){

    var outputText = "";

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

  

    // BEGIN - supplement to the original code

    Array.from(items).forEach ( pnode => {

        // Complement this selector to remove whatever is unwanted.

        // '*' removes all child elements.

        let nodelist_toBlank = pnode.querySelectorAll('em')

          ;

        

        // Blank the unwanted content, saving the original Css property value

        Array.from(nodelist_toBlank).forEach ( pnode_toBlank => {

            pnode_toBlank.setAttribute ( 'data-style-display', pnode_toBlank.style.display );

            pnode_toBlank.style.display = 'none';

        });

        

        // Add data from node to the string buffer. Elements with Css 'display' property set to 'none' are skipped

        outputText += pnode.innerText+"\n";

        

        // Unblank. Restore the original Css property value

        Array.from(nodelist_toBlank).forEach ( pnode_toRestore => {

            pnode_toRestore.style.display = pnode_toRestore.getAttribute ( 'data-style-display' );

            pnode_toRestore.removeAttribute ( 'data-style-display' );

        });

    });

    // END - supplement to the original code

    //

    // Original loop deleted!

    

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

}

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

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

    if (em,items[i].contains(em)){

        outputText += items[i].innerText.replace(em.innerText, "")+"\n";

        console.log(em.innerText);

    }else{

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

    }

}