如何使用 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>，我想用javascript删除这个标签<div class=item> ... </div>之前和之后的所有标签。

注意：我在源文件（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 有一个 polyfill，可用于旧版浏览器（包括 IE8 及更高版本）。

删除div.item 内容的循环在this question 及其答案（包括mine）中进行了讨论。

---

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

Answer 2

这是一个快速的方法。您只需获取要离开的标签的 html 并将 <div class="item"> 的 html 替换为此 html。

编辑

我修改了一些代码，以便留下的 b 标签实际上是您想要的标签，而不仅仅是 <div class="item"> 中的第一个标签

var items = document.getElementsByClassName("item");

function hasGoal(el) {
  return el.innerHTML.indexOf("goal tag") !== -1;
}

for (var item of items) {
  var b = Array.from(item.getElementsByTagName("b")).filter(hasGoal)[0];
  item.innerHTML = b.outerHTML;
}

<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> some text </b>
      <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>

Answer 3

首先，找到每个class=item 元素：

const items = document.getElementsByClassName('item');

然后，您似乎想在<h4> 中提取<b> 标记。因此，请确保为每个 item 元素提取正确的 <b> 标签，并仅用该元素替换所有内容：

items.forEach(item => {
  const title = item.querySelector('h4 b');
  item.innerHTML = '';
  item.appendChild(title);
});

Answer 4

result = $(".item h4 a b");
$("body").html("");
for (let i = 0; i < result.length; i++) {
    $("body").append("<h6>"+$(result[i]).text()+"</h6>");
}

我对此进行了测试并对其进行了测试