从Javascript中的HTML字符串中删除空节点

Question

我正在处理一个HTML模板，其中我必须通过javascript从HTML字符串中删除一些文本。问题是，由于内部内容被删除，因此HTML字符串中有时会保留空标签。

<ul>
<li><strong style="font-size: 10pt;"></strong><span style="font-size: 10pt;"> </span></li>
</ul>
<p><span>. Nunc sodales ullamcorper purus, in pharetra quam dictum at. Nullam iaculis, ex ut gravida commodo, nisi odio volutpat sapien, ut mattis eros est vel turpis. Nunc at eros quis nisl efficitur sagittis. Aliquam sed risus nec ex suscipit placerat. </span></p>
<ul>
<li>In hac habitasse platea dictumst. In congue velit sodales ipsum tincidunt, et ullamcorper massa consectetur.</li>
<li>Nulla id ex eu elit congue consequat at ut odio. Nullam risus lorem, auctor ac nibh sed, suscipit condimentum augue.</li>
</ul>

您可以在第一个ul标签中看到，我想删除其中的多个空标签，否则它将创建一个空白的项目符号列表项。

var tempDiv = document.createElement('div');
tempDiv.innerHTML = str;
str = CleanChildren(tempDiv);

function CleanChildren(elem)
                {
                    var children = elem.childNodes;
                    var len = elem.childNodes.length;
                    document.getElementById("remarksContinue").innerHTML = "No of Child Node :: " + len;
                    for (var i = 0; i < len; i++)
                    {
                        var child = children[i];

                        if(child.hasChildNodes())
                            CleanChildren(child);
                        else
                            elem.removeChildNode(child);

                    }

                    return elem.innerHTML;
                }

以上是我要使用的功能，但是没有运气。 在此先感谢

Answer 1

这里不需要递归-只需检查外部元素的textContent，如果它的trim med值为空字符串，则删除该元素：

const container = document.querySelector('div');
console.log(container.children.length);

Array.prototype.forEach.call(
  container.children,
  node => {
    if (node.textContent.trim() === '') node.remove();
  }
);

console.log(container.children.length);

<div>
  <ul>
    <li><strong style="font-size: 10pt;"></strong><span style="font-size: 10pt;"> </span></li>
  </ul>
  <p><span>. Nunc sodales ullamcorper purus, in pharetra quam dictum at. Nullam iaculis, ex ut gravida commodo, nisi odio volutpat sapien, ut mattis eros est vel turpis. Nunc at eros quis nisl efficitur sagittis. Aliquam sed risus nec ex suscipit placerat. </span></p>
  <ul>
    <li>In hac habitasse platea dictumst. In congue velit sodales ipsum tincidunt, et ullamcorper massa consectetur.</li>
    <li>Nulla id ex eu elit congue consequat at ut odio. Nullam risus lorem, auctor ac nibh sed, suscipit condimentum augue.</li>
  </ul>
</div>

Answer 2

还有另一种最简单的尝试方法。请参见下面的示例，

$(document).ready(function() {
  $("div.myclass ul li").each(function(i) {
    if (this.innerText.trim() === "") {
      this.remove();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myclass">
  <ul>
    <li><strong style="font-size: 10pt;"></strong><span style="font-size: 10pt;"> </span></li>
  </ul>
  <p><span>. Nunc sodales ullamcorper purus, in pharetra quam dictum at. Nullam iaculis, ex ut gravida commodo, nisi odio volutpat sapien, ut mattis eros est vel turpis. Nunc at eros quis nisl efficitur sagittis. Aliquam sed risus nec ex suscipit placerat. </span></p>
  <ul>
    <li>In hac habitasse platea dictumst. In congue velit sodales ipsum tincidunt, et ullamcorper massa consectetur.</li>
    <li>Nulla id ex eu elit congue consequat at ut odio. Nullam risus lorem, auctor ac nibh sed, suscipit condimentum augue.</li>
  </ul>
</div>

Answer 3

var number=1;
var clearnode=document.getElementById("clearnode");
function removeitem()
{
clearnode.removeChild(clearnode.children[0]);
}
function removeitemall()
{
var len=clearnode.children.length;

for(var i=0;i<len;i++)
{
clearnode.removeChild(clearnode.children[0]);

}

}
function additem(text)
{
var newel=document.createElement("li");
newel.innerText=text+" "+number;
clearnode.append(newel);
number++;
}

<ul id="clearnode">
<li><strong style="font-size: 10pt;"></strong><span style="font-size: 10pt;"> </span></li>
</ul>
<p><span>. Nunc sodales ullamcorper purus, in pharetra quam dictum at. Nullam iaculis, ex ut gravida commodo, nisi odio volutpat sapien, ut mattis eros est vel turpis. Nunc at eros quis nisl efficitur sagittis. Aliquam sed risus nec ex suscipit placerat. </span></p>
<ul>
<li>In hac habitasse platea dictumst. In congue velit sodales ipsum tincidunt, et ullamcorper massa consectetur.</li>
<li>Nulla id ex eu elit congue consequat at ut odio. Nullam risus lorem, auctor ac nibh sed, suscipit condimentum augue.</li>
</ul>
<button onclick="additem('new ltem')">add item</button>
<button onclick="removeitem()">add item</button>
<button onclick="removeitemall()">add item</button>

Answer 4

我假定您将所有html标签作为字符串获取，然后可以使用正则表达式替换所有空标签，这些正则表达式仅匹配空标签/<[^/>]+>[ \n\r\t]*<\/[^>]+>/gim，如下代码所示

var str = '<ul><li><strong style="font-size: 10pt;"></strong><span style="fontsize: 10pt;"> </span></li></ul><p><span>. Nunc sodales ullamcorper purus, in pharetra quam dictum at. Nullam iaculis, ex ut gravida commodo, nisi odio volutpat sapien, ut mattis eros est vel turpis. Nunc at eros quis nisl efficitur sagittis. Aliquam sed risus nec ex suscipit placerat. </span></p><ul><li>In hac habitasse platea dictumst. In congue velit sodales ipsum tincidunt, et ullamcorper massa consectetur.</li><li>Nulla id ex eu elit congue consequat at ut odio. Nullam risus lorem, auctor ac nibh sed, suscipit condimentum augue</li></ul>';

    var regex = /<[^/>]+>[ \n\r\t]*<\/[^>]+>/gim;
    while(regex.test(str)){
      str = str.replace(regex, "")
    }

    alert(str)

输出：仅非空标记

<p><span>. Nunc sodales ullamcorper purus, in pharetra quam dictum at. Nullam iaculis, ex ut gravida commodo, nisi odio volutpat sapien, ut mattis eros est vel turpis. Nunc at eros quis nisl efficitur sagittis. Aliquam sed risus nec ex suscipit placerat. </span></p><ul><li>In hac habitasse platea dictumst. In congue velit sodales ipsum tincidunt, et ullamcorper massa consectetur.</li><li>Nulla id ex eu elit congue consequat at ut odio. Nullam risus lorem, auctor ac nibh sed, suscipit condimentum augue</li></ul>