如何用&lt;替换<和> 和&gt; 用jQuery或JS

Question

我一直在寻找一天左右如何用JS或jQuery做些什么,并找到了几个解决方案,但还没有什么可靠的.

我想用这个:

<code class="codeIt">

  <h2> This is an H2 </h2>

</code>

我希望输出为:

<h2> This is an H2 </h2>

我知道我可以做到这一点:

<code class="codeIt">

  &lt;h2&gt; This is an H2 &lt;/h2&gt;

</code>

...但我不想手动搜索并替换我在这些块中的代码,而是在浏览器中即时完成.这可能吗？

我很喜欢jQuery,所以我尝试过.replaceWith或者是JavaScript,.replace但到目前为止我还没有得到它需要的地方.我正在替换整个标签或做其他错误.

我的问题是:我怎么会写一个简单的jQuery(或定期JS)帮我代替我<和我>与HTML实体喜欢<和>我的内<code>标签.

我感谢任何帮助,谢谢.

更新:

我设法让它工作得很好@Prisoner如何解释,它非常漂亮,但是在我的特殊情况下需要稍微扩展,因为我有一个以上的代码块.codeIt,所以我必须检查每个元素和输出...否则它将保持相同的输出(如第一个块)

这是小提琴

感谢大家的回答.

Answer 1

假设您只想转义所有HTML:

$(".codeIt").text($(".codeIt").html());

Answer 2

单个code元素的简单JS

var myCode = document.getElementById('mycode');
myCode.innerHTML = myCode.innerHTML.replace(/</g,'&lt;').replace(/>/g,'&gt;')

简单JS用于多个code元素

var codeEls = document.getElementsByTagName('code');
for(var i in codeEls)
{
    if(parseInt(i)==i)
    {
        var codeEl = codeEls[i];
        if(codeEl.className.match(/\bcodeIt\b/)!==null) codeEl.innerHTML = codeEl.innerHTML.replace(/</g,'&lt;').replace(/>/g,'&gt;')
    }
}

或jQuery

$(".codeIt").each(function() {
    $(this).html(
        $(this).html().replace(/</g,'&lt;').replace(/>/g,'&gt;')
    );
});