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

我正在尝试创建一种快速/肮脏的方法，使用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>

这样就可以用css突出显示。当然，在渲染时，我不想看到实际的SPAN标记

以下是我尝试过的：

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

$（函数（）{
变量iPatt=/\uu i\w+/g
$.each（$（“.target”）.text（）.match（iPatt），函数（i，match）{
var replace=''+匹配子字符串（3）+''；
$（“.target”）.text（函数（）{
返回$（this）.text（）.replace（匹配，替换）；
});
});
});

这是可行的，但是，我添加的span标记显示在呈现的内容中，例如，它们与所有其他前置代码一样。我不想看到它

使用

.html（）

而不是

.text（）

。当您使用

.text（）

时，该值是您希望用户看到的文字文本，因此它将用实体替换特殊的HTML字符，以便它们按字面显示。

使用

.HTML（）

而不是

.text（）

。当您使用

.text（）

时，该值是您希望用户看到的文字文本，因此它将用实体替换特殊的HTML字符，以便它们按字面显示。

.text（）

将值视为文本，并将其呈现为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);
        });
    });
});

.text（）

将值视为文本，并将其呈现为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);
        });
    });
});

---

尝试将其与

html

一起使用：

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

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

$（函数（）{
变量iPatt=/\uu i\w+/g
$.each（$（“.target”）.text（）.match（iPatt），函数（i，match）{
var replace=''+匹配子字符串（3）+''；
$（“.target”）.html（函数（）{
返回$（this）.text（）.replace（匹配，替换）；
});
});
});

尝试将其与

html

一起使用：

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

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

$（函数（）{
变量iPatt=/\uu i\w+/g
$.each（$（“.target”）.text（）.match（iPatt），函数（i，match）{
var replace=''+匹配子字符串（3）+''；
$（“.target”）.html（函数（）{
返回$（this）.text（）.replace（匹配，替换）；
});
});
});

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

作为旁注，每次遇到匹配项时都会完全覆盖

.target

的内容，这令人担忧。您应该利用并只执行一项任务

（函数（）{
变量iPattern=/\uu i（\w+）/g，
iTemplate=“$1”；
$（“.target”）。每个（函数（）{
this.innerHTML=this.innerHTML.replace（iPattern，iTemplate）；
});
})();正如我在评论中所说的，更改html而不是文本（）

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

（函数（）{
变量iPattern=/\uu i（\w+）/g，
iTemplate=“$1”；
$（“.target”）。每个（函数（）{
this.innerHTML=this.innerHTML.replace（iPattern，iTemplate）；
});
})();更改html而不是文本。如果使用
html（）
而不是
text（）
，则最终会出现转义字符，如呈现内容中显示的span class=“interface”。我希望在pre元素中添加实际的DOM元素。不，
text（）
将其转义。。。你们是说
$（“.target”）.text（）
。是的，这很有效！更改html而不是文本。如果使用
html（）
而不是
text（）
，则最终会出现转义字符，如呈现内容中显示的span class=“interface”。我希望在pre元素中添加实际的DOM元素。不，
text（）
将其转义。。。你们是说
$（“.target”）.text（）
。是的，这很有效！所有的答案基本上都是一样的，但你是第一个。只是为了公平！所有的答案基本上都是一样的，但你是第一个。只是为了公平！