JQuery: 为正则表达式匹配添加样式

Question

我想在我的网站上显示 HTML-代码作为文本。我的 html 中有以下示例文本：

<div id="test">
    &lt;p&gt;Hello&lt;/p&gt;  <br />
    &lt;p&gt;Hello2&lt;/p&gt;
</div>

显示：

<p>Hello</p> 
<p>Hello2</p>

在我的网站上。

现在我想更改标签的颜色。我在互联网上发现了用 class 包裹在一个跨度中的相同文本替换 RegExp 的想法，以更改该跨度的样式。

我尝试在 JQuery 中关注：

$(document).ready(function ()
{
    var oldHtml = $("#test").html();
    var newHtml = oldHtml.replace(new RegExp("(&lt;){1}.*(&gt){1};","g"), "<span class='highlight'></span>");
    $("#test").html(newHtml);
});

并得到以下信息：

< 
<

我做错了什么？

Answer 1

捕获组在错误的位置。您将左括号捕获到 </code> 中，将右括号捕获到 <code> 中，而您从未使用过。

(&lt;){1}.*(&gt){1};

你也不需要量词。

&lt;(.*?)&gt;

有了这个模式和相同的替换，它应该可以工作。 *? 量词使其不贪心，因此它会在匹配任何内容时尽早停止。

请注意，使用正则表达式解析 HTML 是个坏主意。即使 HTML 的部分内容被转义，它仍然是一种不规则的硬语言。它最终无法正常工作。请改用解析器。或者对于您的用例，只需使用许多易于查找和使用的语法高亮库之一。

JQuery: 为正则表达式匹配添加样式

JQuery: Add a style to Regex-matches

regex

jquery

replace

highlight