Question

我需要将父元素的innerHTML保存为变量，同时忽略某些子类。

我尝试了隐藏和不显示任何内容（无效）。删除它们，然后将它们重新添加到原来的位置是一种选择，但不确定如何实现。

示例代码，读取父div的innerHTML，但忽略任何包含“ ignore-me”作为类的元素。

<div id="parent">
 <p>read me read me read me</p>
 <div class="ignore-me">and thus ignore this text</div>
 <p>read me read me read me</p>
 <script class="ignore-me"></script>
 <p>read me read me read me</p>
 <link class="ignore-me">
</div>

我有一个复制按钮，可将正文内容复制到剪贴板。我只需要弄清楚如何在复制函数中忽略/剥离以上元素而不破坏它们。

Answer 1

这是您可以实现的方法。选择除特定类以外的所有子项。

let html=document.querySelectorAll("#parent >:not(.ignore-me)");
//console.log(html) // returns only p tags
html.forEach(ele=>console.log(ele.innerHTML)) // you can get html like this

<div id="parent">
 <p>read me read me read me</p>
 <div class="ignore-me">and thus ignore this text</div>
 <p>read me read me read me</p>
 <script class="ignore-me"></script>
 <p>read me read me read me</p>
 <link class="ignore-me">
</div>

这是您可以在jquery中执行的操作（只需添加）

let html = $('#parent').children().not('.ignore-me');
//console.log(html);

html.each(function() {
 console.log($(this).html())
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
  <p>read me read me read me</p>
  <div class="ignore-me">and thus ignore this text</div>
  <p>read me read me read me</p>
  <script class="ignore-me"></script>
  <p>read me read me read me</p>
  <link class="ignore-me">
</div>

Answer 2

如果我清楚地了解到，您需要<?xml version="1.0" encoding="UTF-8"?> <test> <JUDGES> 01 Paul Bask 02 Lisa Belin 03 Janet Bally 04 Rand Johnsons 05 Maze Hazam </JUDGES> <PLACEMENTS> 702|701 ., Kaka with Hac, Sam Place|Time|Number|Heat|Competition|CompetitionCode|ScoresheetCode -|10:32PM Sunday;6@11:11PM Sunday|338|Heat 764|AC-A Open|600|NONE 891|685 ., Ksusha with Kudashev, Ivan Place|Time|Number|Heat|Competition|CompetitionCode|ScoresheetCode -|10:44PM Sunday;6@11:41PM Sunday|186|Pro heat 9|Pro Open|837|NONE </PLACEMENTS> <COMPETITION> DANCERCODES:16777293,1215 SHEETCODE:33554438 COMPCODE:1377 ENTRANTTYPE:Couple AGE:A2 ROUND:Final <RESULTS> Heat 3: Final |No.|10|12|13|14|17||1|Result| |177 Vorvis/Timar|1|1|1|1|1||5|1| </RESULTS> </COMPETITION> </test>的副本，但不包含类别为parent的元素：

[edit] 添加了clipborad副本（请参阅：https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard#Using_the_Clipboard_API）

ignore-me

document.querySelector('#Bt-Copy').onclick=_=>
{
  let parentBis = document
                    .getElementById('parent')
                    .cloneNode(true)
  parentBis
    .querySelectorAll('.ignore-me')
    .forEach(element=>{ parentBis.removeChild(element) })

  console.log('copy :=', parentBis.innerHTML)
  add2Clipboard( parentBis.innerHTML ) 
}


function add2Clipboard(newClip) // copy to clipboard
{
  navigator.clipboard
    .writeText(newClip)
    .then(_=>{ console.log('clipboard successfully set ') }
         ,_=>{ console.log('clipboard write failed ')     }
    );
}

.ignore-me { color: red }

Answer 3

也许现在回答为时已晚，但我认为为了在需要 html 的情况下保留树结构，我发现以下是最佳解决方案。

const node = document.getElementById("parent");
const clone = node.cloneNode(true);
const elems = clone.querySelectorAll('.ignore-me');
for (const elem of elems) {
  elem.remove();
}
console.log(clone.innerText);

<div id="parent">
 <p>read me read me read me</p>
 <div class="ignore-me">and thus ignore this text</div>
 <p>read me read me read me</p>
 <script class="ignore-me"></script>
 <p>read me read me read me</p>
 <link class="ignore-me">
</div>

获取父级的内部HTML，但忽略子级

3 个答案: