javascript - 将实际的 HTML 元素添加到 PRE/CODE 内容

Question

我正在尝试创建一种快速/肮脏的方式来使用 javascript 在 html 中为 pre/code 标记添加一些语法突出显示。

我遇到的问题是，如果我编辑 text() 或 html()，我会得到转义内容。也就是说，添加的标签呈现为预/代码，或者我得到一堆转义字符。

考虑以下 html:

<pre>
    <code class="target">
    public interface __iIFoo { }
    public class __tBar : __iIFoo { }

    var list = new List__/__iIFoo\__();
    </code>
</pre>

此处的目标是将出现的 __iIFoo 替换为:

<span class="interface">IFoo</span>

这样就可以用css高亮显示了。当然，当它呈现时，我不想看到实际的 SPAN 标记。

这是我尝试过的:

$(function(){
    var iPatt = /__i\w+/g
    $.each($(".target").text().match(iPatt), function(i,match){
        var replace = '<span class="interface">'+match.substring(3)+'</span>';
        $(".target").text(function(){
            return $(this).text().replace(match, replace);
        });
    });
});

这行得通，但是，我添加的 span 标签显示在呈现的内容中，例如它们就像所有其他的预编码一样。我不想看到它!

Answer 1

使用 .html() 而不是 .text()。当您使用 .text() 时，该值是您希望用户看到的文字文本，因此它将特殊的 HTML 字符替换为实体，以便它们按字面显示。