javascript - 替换的字符串在窗口中显示标签

Question

我用标记词替换了 div 的一部分(内容可编辑)。它不仅显示新词的内容，还显示标签。

这是div的原始内容:

This is inside the <div> tag, and I'd like to replace this [[var12]]

这是我想要的样子:

This is inside the <div> tag, and I'd like to replace this var12

然而，它最终看起来像这样:

This is inside the <div> tag, and I'd like to replace this <span>var12</span>

这是我使用的代码:

var pattern = new RegExp("\\[\\[var[0-9]*\\]\\]")
if ($(this).text().match(pattern)) {
    var match = $(this).text().match(pattern);
    var num = match.toString().match(/[0-9]+/);  
    var tagged = '<span class="variable">VAR ' + num + '</span>';
    $(this).text($(this).text().replace(pattern, tagged));    
}

Answer 1

它看起来像那样，因为您已经明确告诉它使用 .text() 转义 html。如果要插入html，可以使用.html()。

$(this).html($(this).text().replace(pattern, tagged));

来自.text() docs :

We need to be aware that this method escapes the string provided as necessary so that it will render correctly in HTML. To do so, it calls the DOM method .createTextNode(), does not interpret the string as HTML.