javascript - 如何使用 Javascript 删除 html 代码中特殊标签之前和之后的标签？

Question

我需要使用 Javascript 删除 div 中具有“item”类的所有标签，但一个标签除外，<b>标签。

这就是我的 HTML 文档的样子，(我的示例代码):

    <div class="item">
        <a href="sample-href1">
            <div class="result-image">
                <h5 class="result-cat cat-conf wn">test</h5>
            </div>
        </a>
        <h4>1.
            <a href="sample-href2" title="sample-title2">
                <b> goal tag1 (i need just this tag) </b>
            </a>
        </h4>
        <span class="feature">test</span>
        <div class="compact">
            </br>
            <a href="test12" title="test12"> test12 </a>
            <br>
            <b> some text </b>
            <a href="test123" title="test123"> test123 </a> -
            <a href="test147" title="test147" > test147 </a>
            </br>
            <b>11</b>
            another some text
            </br>
        </div>
        <a href="test159" title="test159" class="download"> test </a>
        <div class="clr"></div>
    </div>
    <div class="item">
        <a href="sample-href1968">
            <div class="result-image">
                <h5 class="result-cat cat-conf wn">test418</h5>
            </div>
        </a>
        <h4>2.
            <a href="sample-href215" title="sample-title215">
                <b> goal tag2 (i need just this tag) </b>
            </a>
        </h4>
        <span class="feature">test23</span>
        <div class="compact">
            </br>
            <a href="test12234" title="test12234"> test12234 </a>
            <br>
            <b> some text </b>
            <a href="test12233" title="test12233"> test12233 </a> -
            <a href="test14657" title="test14657" > test14657 </a>
            </br>
            <b>16</b>
            another some text
            </br>
        </div>
        <a href="test15912" title="test15912" class="download"> test </a>
        <div class="clr"></div>
    </div>
    ... (and so on (<div class=item> ... </div>))

我只需要这个标签<b> goad tag(1, 2, ...) (i need just this tag) </b> ，我想删除这个标签<div class=item> ... </div>中它之前和之后的所有标签使用 JavaScript。

注意:我在源文件(test.html)中有很多div(<div class=item> ... </div>)，我想当我加载页面时我只有这样的东西:

<div class=item>
   <b> goal tag1 (i need just this tag) </b>
</div>
<div class=item>
   <b> goal tag1 (i need just this tag) </b>
</div>
...

我对 Javascript 非常陌生，有人可以帮我解决这个问题吗？

Answer 1

我会通过循环遍历 div.item 元素，找到其中的 b 元素，从 div 中删除所有元素来完成此操作，然后添加 b 回来:

// Find all the div.item elements
document.querySelectorAll("div.item").forEach(function(div) {
  // Find the first `b` element with the desired matching text
  var b = Array.prototype.find.call(
    div.querySelectorAll("b"),
    function(b) {
      return b.textContent.indexOf("goal tag") !== -1;
    }
  );
  // Remove all children from the div
  while (div.lastChild) {
    div.removeChild(div.lastChild);
  }
  // If we found the relevant `b` element, add it back
  if (b) {
    div.appendChild(b);
  }
});

实例:

document.querySelectorAll("div.item").forEach(function(div) {
  var b = Array.prototype.find.call(
    div.querySelectorAll("b"),
    function(b) {
      return b.textContent.indexOf("goal tag") !== -1;
    }
  );
  while (div.lastChild) {
    div.removeChild(div.lastChild);
  }
  if (b) {
    div.appendChild(b);
  }
});

<div class="item">
  <a href="sample-href1">
    <div class="result-image">
      <h5 class="result-cat cat-conf wn">test</h5>
    </div>
  </a>
  <h4>1.
    <a href="sample-href2" title="sample-title2">
      <b> goal tag1 (i need just this tag) </b>
    </a>
  </h4>
  <span class="feature">test</span>
  <div class="compact">
    <a href="test12" title="test12"> test12 </a>
    <br>
    <b> some text </b>
    <a href="test123" title="test123"> test123 </a> -
    <a href="test147" title="test147"> test147 </a>
    <b>11</b> another some text
  </div>
  <a href="test159" title="test159" class="download"> test </a>
  <div class="clr"></div>
</div>
<div class="item">
  <a href="sample-href1968">
    <div class="result-image">
      <h5 class="result-cat cat-conf wn">test418</h5>
    </div>
  </a>
  <h4>2.
    <a href="sample-href215" title="sample-title215">
      <b> goal tag2 (i need just this tag) </b>
    </a>
  </h4>
  <span class="feature">test23</span>
  <div class="compact">
    </br>
    <a href="test12234" title="test12234"> test12234 </a>
    <br>
    <b> some text </b>
    <a href="test12233" title="test12233"> test12233 </a> -
    <a href="test14657" title="test14657"> test14657 </a>
    <b>16</b> another some text
  </div>
  <a href="test15912" title="test15912" class="download"> test </a>
  <div class="clr"></div>
</div>

或者使用 ES2015+:

// Find all the div.item elements
for (const div of document.querySelectorAll("div.item")) {
  // Find the first `b` element with the desired matching text
  const b = [...div.querySelectorAll("b")].find(b => b.textContent.includes("goal tag"));
  // Remove all children from the div
  while (div.lastChild) {
    div.removeChild(div.lastChild);
  }
  // If we found the relevant `b` element, add it back
  if (b) {
    div.appendChild(b);
  }
});

<小时/>

请注意，querySelectorAll 返回的 NodeList 上的 forEach 相对较新； my answer here有一个可以用于旧版浏览器(包括 IE8 及更高版本)的 polyfill。

删除 div.item 内容的循环在 this question 中讨论。及其答案(包括 mine )。

<小时/>

另请参阅Krzysztof Janiszewski's approach通过标记进行往返，如果您知道 b 元素上没有事件处理程序，那么这是相当合理的。