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

问题描述 投票:0回答:4

我正在开发一个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;
                }

以上是我试图使用但没有运气的功能。提前致谢

javascript html dom
4个回答
3
投票

这里不需要递归 - 只需检查外部元素的textContent,如果其trimmed值为空字符串,则删除元素:

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>

0
投票

还有另一种最简单的方法可以尝试。请看下面的例子,

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

0
投票

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>

0
投票

我假设您将所有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>
© www.soinside.com 2019 - 2024. All rights reserved.