1

我正在尝试创建一种快速/肮脏的方式来使用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);
        });
    });
});

这可行，但是，我添加的跨度标签显示在呈现的内容中，例如它们就像所有其他预代码一样。我不想看到它！

4

4 回答 4

1

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

于 2013-08-02T04:59:09.970 回答
1

演示

.text()将值视为文本并将.html()其呈现为 html 内容

$(".target").html(function () { //replace text with html
    return $(this).text().replace(match, replace);
});
于 2013-08-02T04:59:24.140 回答
1

尝试使用它来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);
        });
    });
});
于 2013-08-02T05:01:09.667 回答
1

正如我在评论中所说，更改 html 而不是文本（小提琴）。

.target附带说明一下，每次遇到匹配项时都会完全覆盖内容，这令人担忧。您应该利用RegExp 捕获组并只执行一项任务。

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

    $(".target").each(function () {
        this.innerHTML = this.innerHTML.replace(iPattern, iTemplate);
    });
})();
于 2013-08-02T05:01:38.770 回答