Question

我正在尝试创建一种快速/脏的方法，使用javascript在html中为pre / code标签添加一些语法高亮。

我遇到的问题是，如果我编辑text（）或html（），我会获得转义内容。也就是说，添加的标签呈现为pre / code，或者我得到一堆eascape字符。

考虑以下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字符替换为实体，以便它们按字面显示。

Answer 2

DEMO

.text()将值视为文本，.html()将其视为html内容

$(".target").html(function () { //replace text with html
    return $(this).text().replace(match, replace);
});

Answer 3

尝试使用html代替：

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

Answer 4

正如我在评论中所说，更改html而不是文字（fiddle）。

作为旁注，每次遇到匹配时，你都会完全覆盖.target的内容，这令人担忧。您应该利用RegExp capture groups并只执行一项任务。

(function () {
    var iPattern = /__i(\w+)/g,
        iTemplate = "<span class='interface'>$1</span>";

    $(".target").each(function () {
        this.innerHTML = this.innerHTML.replace(iPattern, iTemplate);
    });
})();

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

4 个答案: