regex 多个HTML标记的正则表达式匹配

uqzxnwby 于 2023-04-22 发布在其他

关注(0)|答案(1)|浏览(123)

我试图找到一个正则表达式，如果一段HTML中的所有标签都是空的，不管属性如何，如果有嵌套的标签，它都匹配。
我的代码基本上看起来像这样：

const emptyHtmlTagRegex = new RegExp(/<[^/>][^>]*><\/[^>]+>/);

if (emptyHtmlTagRegex.test(this.htmlContent)) {
  // Output placeholder
};

如果this.htmlContent为：

<ul><li class="class-name"></li></ul>

<p></p>

但不匹配，如果this.htmlContent为：

<p>nomatch</p><ul><li></li><ul><p></p>

正则表达式不匹配整个字符串，因此如果有尾随的空标记，测试方法将报告误报：Regex 101 sample
我还尝试使用this.htmlContent.replace(regex,'')并查找空字符串，但由于与我使用的测试框架的兼容性问题而失败。

regex

来源：https://stackoverflow.com/questions/76061244/regex-matching-for-multiple-html-tags

1条答案

按热度按时间

kfgdxczn1#

多亏了@markalex，我才知道最好通过解析HTML来实现这一点。
对于将来遇到这种情况的人，我的解决方案看起来像这样：

const isEmptyHtml = (html) => {
  // Create a new element and add the input html string
  const element = document.createElement('div');
  element.innerHTML = html;

  // Use innerText to get the rendered text from the html element created
  const trimmedContent = element.textContent.trim();

  // Returns true if the contents does not contain any text - all tags are empty
  return trimmedContent === '';
};

if (isEmptyHtml(this.htmlContent)) {
  // Output placeholder
};

到目前为止，这适用于我测试过的HTML片段。

赞(0）回复(0）举报 2023-04-22

我来回答

regex 多个HTML标记的正则表达式匹配

1条答案

相关问题

热门标签

最新问答