Question

您好，我在段落中嵌套了一个标记，我正在尝试删除标记，但保留文本或值。类似于在jQuery中但在javascript中解包。

我在虚拟HTML页面上尝试了此代码，并且效果很好

<html>
<body>
    <p>aaa <Strong>bbbbb</Strong></p>
    <p>acccaa <Strong>ddddd</Strong></p>
    <p>eeee <Strong>ffff</Strong></p>

    <script>
        var p = document.getElementsByTagName("p");
        for(var i=0;i<p.length;i++){
            var strongs = p[i].getElementsByTagName("strong");
            for(var j=0;j<strongs.length;j++){
                p[i].replaceChild(document.createTextNode(strongs[j].innerText),strongs[j]);
            }
        }
    </script>
</body>
</html>

但是，只要我在真实的页面示例中尝试相同的代码：https://www.bustle.com/privacy

我收到此错误：

无法在“节点”上执行“ replaceChild”：要替换的节点不是该节点的子节点。

关于如何在示例或任何其他示例中使用它的任何想法？

Answer 1

getElementsByTagName()返回一个 live NodeList。因此，当您替换标记时，以下所有元素的索引都会下移，并且同一段中有多个标记时，代码将失败。结果，它将跳过一些标签。

解决方案是将NodeList转换为数组，以便在循环时它不会更改。

您的真实页面中没有出现的另一个问题是标签可以嵌套在中。您应该使用strongs[j].parentElement来获得其直接父级，而不要假设p[i]是父级。

var p = document.getElementsByTagName("p");
for (var i = 0; i < p.length; i++) {
  var strongs = Array.from(p[i].getElementsByTagName("strong"));
  for (var j = 0; j < strongs.length; j++) {
    strongs[j].parentElement.replaceChild(document.createTextNode(strongs[j].innerText), strongs[j]);
  }
}

<html>

<body>
  <p>aaa
    <Strong>bbbbb</Strong> - <strong>12345</strong></p>
  <p>acccaa <span><Strong>ddddd</Strong> x</span></p>
  <p>eeee
    <Strong>ffff</Strong>
  </p>

</body>

</html>

您还可以通过使用查询选择器来避免嵌套循环。

var strongs = document.querySelectorAll("p strong");
strongs.forEach(strong => strong.parentElement.replaceChild(document.createTextNode(strong.innerText), strong));

<html>

<body>
  <p>aaa
    <Strong>bbbbb</Strong> - <strong>12345</strong></p>
  <p>acccaa <span><Strong>ddddd</Strong> x</span></p>
  <p>eeee
    <Strong>ffff</Strong>
  </p>

</body>

</html>

Answer 2

无需循环遍历段落来删除。只需将所有“强项”删除就可以了。

function removeStrongs() {
  let strongs = document.querySelectorAll('strong');
  strongs.forEach(strong => {
    strong.insertAdjacentText('afterend', strong.innerText);
    strong.remove();
  });
}

<h4>This is a <strong>Title</strong></h4>
<p>
  Now is the time for all <strong>good</strong> men to come to the <strong>aid</strong> of the party.
</p>
<p>A <strong>quick brown</strong> fox jumps over the lazy dog.</p>

<button onclick="removeStrongs();">Remove Strongs</button>

删除标签名称，但保留标签

2 个答案: