4

我一直在寻找如何使用 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 非常陌生，所以我尝试过.replaceWithJavaScript 或 JavaScript .replace，但到目前为止，我还没有找到我需要使用它的地方。我要么更换整个标签，要么做错别的事情。

我的问题是：我将如何编写一个简单的 jQuery（或常规 JS）来帮助我用我的标签之类的HTML 实体替换我的<和我的。>&lt;&gt;<code>

我感谢任何帮助，谢谢。

更新：

@Prisoner 解释说，我设法让它工作得很好，它非常漂亮，但是在我的特殊情况下，这需要一点扩展，因为我的类有不止一个代码块.codeIt，所以我必须让它检查每个元素和输出...否则它将继续产生相同的输出（如第一个块）

这是小提琴

感谢大家的回答。

4

6 回答 6

6

假设您只想转义所有 HTML：

$(".codeIt").text($(".codeIt").html());
于 2013-07-31T09:10:29.700 回答
5

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;')
    );
});
于 2013-07-31T09:09:49.287 回答
1 
var t = $('.codeIt').html();

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

看看这个小提琴http://jsfiddle.net/kU8bV/1/

于 2013-07-31T09:11:54.803 回答
1

您可以使用 jquery 的文本功能：

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

var escapedText = $('.codeIt').text(myText).html();
于 2013-07-31T09:10:37.343 回答
0

假设您想在 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>
于 2013-07-31T09:15:44.680 回答
0 
$('code').html($('code').html().replace(/</g, '&lt;').replace(/>/g, '&gt;'));
于 2013-07-31T09:09:33.357 回答