如何使用jQuery或JS将<和>替换为&lt;和&gt;？

Question

我已经搜索了一整天，想要用JS或jQuery完成某些操作，找到了几个解决方案，但还没有找到可靠的。

我希望使用以下代码：

<code class="codeIt">

  <h2> This is an H2 </h2>

</code>

我希望输出结果如下：

<h2> 这是一个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类的代码块，所以我必须检查每个元素并输出...否则它会继续产生相同的输出（例如第一个块）

这里是示例

感谢所有人的答案。

- sulfureous

---

可能是编码HTML实体的重复问题。 - Spudley

使用转义字符。 - Hushme

<表示<，而>表示>，您可以使用这些。 - Vikas Gautam

https://dev59.com/ynVD5IYBdhLWcg3wTJvF#12034334 - moonwave99

https://dev59.com/iHM_5IYBdhLWcg3wzmnL - Christian Phillips

Answer 1

假设您只想转义所有HTML内容：

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

- Prisoner

---

如果你在这个页面上运行那段代码（当然，将选择器更改为“code”），它会失败得相当惊人。 - MDEV

这似乎是我要找的解决方案，但它对我不起作用，它一直将<h2>渲染为标题而不是文本。我可能在实现一行代码时做错了什么？呵呵...我知道我的选择器是正确的。我尝试过使用<code>标签或<div>标签，但都不行。 - sulfureous

@sulfureous，可能是你引入jQuery的方式或者代码运行方式有问题。这个基本示例可以正常工作：http://jsfiddle.net/T8kBt/。 - Prisoner

谢谢，现在看起来可以了。可能是缓存问题。 - sulfureous

Answer 2

单个code元素的纯JS实现

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

多个code元素的纯JS实现

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;')
    );
});

- MDEV

Answer 3

您可以使用 jQuery 的 text 函数：

var myText = $('.codeIt').html();

var escapedText = $('.codeIt').text(myText).html();

- harpax

---

谢谢@harpax，这肯定也可以，但它比被接受的答案更长，而且它做的是一样的事情... 但它能工作，毫无疑问。 - sulfureous

Answer 4

var t = $('.codeIt').html();

$('.codeIt').text(t).html();

看看这个 fiddle http://jsfiddle.net/kU8bV/1/

- mikach

---

这个小提琴不会链接到你的小提琴，它只会链接到jsfiddle.net。 - sulfureous

这个在 Fiddle 上对我很有效。它很简单，现在它有意义了，因此我们正在创建一个名为“t”的变量，并将其设置为 .codeIt 元素的 HTML，然后我们使用 .text（） 方法将相同的 .codeIt 元素作为文本输出 t 变量并添加到 HTML 中。我理解得对吗？ - sulfureous

Answer 5

$('code').html($('code').html().replace(/</g, '&lt;').replace(/>/g, '&gt;'));

- Raidri

---

这将仅替换第一个 < 和 > 的实例。您需要执行全局正则表达式替换，例如 @SmokeyPHP。 - Xophmeister

请在您的解决方案中包含描述，以使答案更有帮助。 - Tony

Answer 6

假设您想在codeIt类中编写所有HTML代码：

<script type="text/javascript">
        function htmlEncode(value){
            if (value) {
                return jQuery('<div />').text(value).html();
            } else {
                return '';
            }
        }

        function htmlDecode(value) {
            if (value) {
                return $('<div />').html(value).text();
            } else {
                return '';
            }
        }       
        $('.codeIt').each(function() {
            myEncodedString = htmlEncode($(this).html());
            $(this).html(myEncodedString);
        });
</script>

- Guillaume Lhz