javascript - 在引号之间匹配 HTML 打开标签

Question

我有下面的小 html 代码:

<span class="k">function</span> () { <span class="k">this</span>.test = '<p><span>test</span></p>'; }

和这个正则表达式:

/["|'](<)|(<)(?:\/[^>]>)["|']/g

使用这个正则表达式，它返回两个匹配的结果，但我想要的是匹配引号之间的所有 html 开放标记并将它们分组为一个结果。这样做的正确正则表达式是什么？ 之后我需要用 < 替换那些打开的标签。 提前致谢!

Answer 1

您有“损坏”的 HTML，在带引号的字符串中包含 HTML 标记。这将无法使用 HTML 解析器解析字符串，正如一些评论者所建议的那样——他们原则上是正确的，但在这种情况下不起作用。

这个 HTML 片段来自哪里？最好的替代方法是在工作流程的较早阶段对引号内的 HTML 进行转义，这样您就不必编写难看的正则表达式来尝试解开它。

如果您真的想使用正则表达式来执行此操作，则不需要一些可笑的毛茸茸的正则表达式。这样做就足够了:

str.replace(/'(.*?)'/g, function(_, match) { return esc(match); })

esc怎么写？好吧，大多数图书馆都有这样做的东西。或者你可以自己写，正如另一个答案所建议的那样。下面是一个解决方案，它使用浏览器的内置功能来处理此类事情:

function esc(str) {
  var e = document.createElement('div');
  e.textContent = str;
  return e.innerHTML;
}

这给你:

>> var x = '<span class="k">function</span> () { <span class="k">this</span>.test = \'<p><span>test</span></p>\'; }'
>> x.replace(/'(.*?)'/g, function(_, match) { return esc(match); })
<< "<span class="k">function</span> () { <span class="k">this</span>.test = &lt;p&gt;&lt;span&gt;test&lt;/span&gt;&lt;/p&gt;; }"