Question

我需要从HTML字符串中删除空白标记。通过＆＃34;标记＆＃34;我的意思是任何包含实体或字符的空HTML元素，这些实体或字符将在Web浏览器中呈现为空白。例如

<p>&nbsp;&zwnj;</p>Test <div>  </div><br/><span> okay </span>

......应该成为

Test <span> okay </span>

重点是从DOM中删除不可见的元素，或者只添加额外的换行符。

这将解决我遇到的支持在线编辑器的问题，用户可以从Word中剪切粘贴内容。有时剪贴板会抓取不完整的元素。例如，关闭p标签。粘贴到编辑器中时，插入开口p标签会修复不完整的元素。这是我有机会应用正则表达式和DOM操作来清理这些令人惊讶的非常有问题的元素。 Jquery是我唯一可以利用的库。

Answer 1

/<.+?>( |&zwnj;|\s)+<\/.+?>|<br\/>/g为我做了诀窍：

let str = '<p>&nbsp;&zwnj;</p>Test <div>  </div><br/><span> okay </span>';
let regex = /<.+?>(&nbsp;|&zwnj;|\s)+<\/.+?>|<br\/>/g;

console.log(str.replace(regex, ""));

Answer 2

只是为了给你一个想法：循环遍历DOM中的所有元素，看看他们的innerHtml或innerText是否是像这样的空格：

var all = document.getElementsByTagName("*");
for (var i=0, max=all.length; i < max; i++) {
    if(all[i].innerHTML == "" || all[i].innerText == ""){           
        all[i].parentElement.removeChild(all[i]);
    };
}

Answer 3

这是一个递归解决方案，应该删除正文中的所有空标记。

var body = document.getElementsByTagName('body')[0];

function removeEmptyChildren(node){
  let children = node.children;
  for(var i = 0; i < children.length; i++){
    if(children[i].children){
      removeEmptyChildren(children[i]);
    }
    if(!children[i].textContent.trim().length){
      node.removeChild(children[i]);
      i--;
    }
  }
}

removeEmptyChildren(body);

如何使用javascript匹配和删除空白html标记？

3 个答案: