如何使用Javascript在html代码中删除特殊标记前后的标记？

我需要用Javascript删除一个div中的所有标签，这个div的类是'item'，除了一个标签，这个标签

这是我的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>))

我只需要把这个标签贴在标签1，2。。。我只需要这个标签，我想删除所有标签之前和之后，在这个标签。。。使用javascript

注：我有很多div。。。在源文件filetest.html中，当我加载页面时，我想这样做：

<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非常陌生，有人能帮我解决这个问题吗？

我会通过循环div.item元素，找到其中的b元素，从div中删除所有元素，然后再添加b：

实例：

document.querySelectorAlldiv.item.forEachfunctiondiv{ var b=Array.prototype.find.call div.querySelectorAllb， 功能B{ 返回b.textContent.indexOfgoal标记！==-1； } ; 而div.lastChild{ 最后一名子女； } 如果b{ B部分； } }; 1. 测验 一些文本 - 11另一篇文章 2. 测试23 一些文本 - 16.再来一些文本 首先，查找每个class=item元素：

const items=document.getElementsByClassName'item'； 然后，您似乎想要提取内部的标记。因此，请确保为每个item元素提取正确的标记，并仅用该元素替换所有内容：

items.forEachitem=>{ const title=item.querySelector'h4 b'； item.innerHTML=； 项目名称； };

---

这里有一个快速的方法。您只需获取要离开的标记的html，并用此html替换的html

编辑

我修改了一点代码，使保留的b标记实际上是您想要的，而不仅仅是中的第一个

var items=document.getElementsByClassNameitem； 函数hasGoalel{ 返回el.innerHTML.indexOfgoal标记！==-1； } 对于项目的var项目{ var b=Array.fromitem.getElementsByTagNameb.filterhasGoal[0]； item.innerHTML=b.outerHTML； } 1. 测验 一些文本 - 11另一篇文章 2. 测试23 一些文本 - 16.再来一些文本

---

我测试了这一点及其有效性

，以及是否有其他元素与item类一起使用？如果我们知道b元素上没有事件处理程序，那么这是一个不错的方法，因为这样可以删除它们。但是我会使用querySelectorAlldiv.item而不是getElementsByClassName，因为item类中可能还有其他元素，querySelectorAll比getElementsByClassName更受支持，尽管这只与IE8等过时浏览器相关。还有其他不相关的b元素，所以您不能只获取第一个。也可能OP会告诉我们这些不在div.item中。

// 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);
  }
});

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