Question

我需要使用带有Javascript的“item”类删除div中的所有标记，但只有一个标记<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);
  }
});

直播示例：

＆＃13;

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

＆＃13;

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

＆＃13;

或使用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);
  }
});

请注意forEach返回的NodeList上的querySelectorAll相对较新; my answer here有一个可以用于旧浏览器的填充（包括IE8及更高版本）。

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

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

Answer 2

这是一种快速的方法。你只需要使用你要留下的标签的html，并用这个html替换<div class="item">的html。

修改

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

＆＃13;
＆＃13;
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; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 3

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

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

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

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

我测试了这个和它的工作

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

4 个答案: