删除标签名称但保留标签

删除标签名称但保留标签

您好，我有一个<strong></strong>嵌套在段落<p></p>中的标签，我正在尝试删除<strong>标签但保留文本或值。类似于在 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”失败：要替换的节点不是该节点的子节点。

关于如何让它在示例或任何其他示例上工作的任何想法？

倚天杖

浏览 121回答 2

2回答

慕码人8056858

getElementsByTagName()返回一个活动的NodeList。<strong>因此，当您替换一个标签时，以下所有元素的索引都会向下移动，并且当您在同一段落中有多个标签时，代码会失败。结果，它会跳过一些标签。解决方案是将转换NodeList为数组，以便在循环时不会更改。实际页面中另一个不在代码段中的问题是<strong>标签可以嵌套在<p>. 您应该使用strongs[j].parentElement它来获取其直接父级，而不是假设 thep[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>

0

0

四季花海

无需遍历段落即可删除<strong>. 简单地移除所有“强项”就可以了。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>

0

0

随时随地看视频慕课网APP

相关分类

JavaScript