如何在html标签之间替换内容而不替换标签本身

Question

假设我有一个像这样的字符串：

<code>Blah blah Blah
enter code here</code>
<code class="lol">enter code here
fghfgh</code>

我想使用javascript用HTML对其进行编码的回调函数替换<code>标记之间的所有匹配项。

这是我目前拥有的：

function code_parsing(data){
    //Dont escape & because we need that... in case we deliberately write them in
    var escape_html = function(data, p1, p2, p3, p4) {
        return p1.replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
    };

    data = data.replace(/<code[^>]*>([\s\S]*?)<\/code>/gm, escape_html);
        // \[start\](.*?)\[end\]
        return data;        
    };

不幸的是，此功能是删除"<code>"标记并将其仅替换为内容。 我想将<code>标记保留为任意数量的属性。 如果仅将<code>标记硬编码回去，则会丢失属性。

我知道regex不是最好的工具， 但是其中没有嵌套的元素。

Answer 1

您不应该使用正则表达式来解析HTML。

就是说，您需要使用括号组捕获要保留的内容，并将替换器附加到要操作的位上。

data.replace(/(<code[^>]*>)([\s\S]*?)(<\/code>)/g,
             function (_, startTag, body, endTag) {
               return startTag + escapeHtml(body) + endTag;
             })

要了解为什么不应该使用正则表达式解析HTML，请考虑这样做

<code title="Shows how to tell whether x > y">if (x &gt; y) { ... }</code>

<code lang="js">node.style.color = "<code lang="css">#ff0000</code>"</code>

<code>foo</CODE >

<textarea><code>My HTML code goes here</code></textarea>

<code>foo  <!-- commented out </code> --></code>

Answer 2

简单的解决方案：在您的escape_html函数中，在对字符串执行完操作之后，但是在返回字符串之前，请在字符串的前面附加和添加标签，然后返回完整内容。

有时最简单的答案是最好的:)