如何用 < 替换 < 和 > 和 > 使用 jQuery 或 JS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17966089/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to replace < and > with < and > with jQuery or JS
提问by sulfureous
I've been searching for a day or so how to do something with JS or jQuery and found a couple of solutions but nothing solid yet.
我一直在寻找一天左右的时间如何用 JS 或 jQuery 做一些事情，并找到了几个解决方案，但还没有什么可靠的。
I want to use this:
我想用这个：
<code class="codeIt">
<h2> This is an H2 </h2>
</code>
And I want the output to be:
我希望输出是：
<h2> This is an H2 </h2>
<h2> This is an H2 </h2>
I know I can achieve this by doing:
我知道我可以通过以下方式实现这一目标：
<code class="codeIt">
<h2> This is an H2 </h2>
</code>
...But I would like to not do a manual search and replace on my code in those blocks and rather have it done on the fly in the browser. Is this possible?
...但我不想在这些块中手动搜索和替换我的代码，而是在浏览器中即时完成。这可能吗？
I'm pretty noob with jQuery so I've tried .replaceWithor JavaScript's .replacebut so far I've not gotten where I need to be with it. I'm either replacing the whole tag or doing something else wrong.
我对 jQuery 非常菜鸟，所以我尝试过.replaceWithJavaScript 或 JavaScript，.replace但到目前为止我还没有达到我需要的地方。我要么替换整个标签，要么做其他错误的事情。
My question is: How would I write a simple jQuery (or regular JS) to help me replace my <and my >with HTML entities like <and >inside my <code>tags.
我的问题是：我将如何编写一个简单的 jQuery（或常规 JS）来帮助<我>用 HTML 实体（如我的标签<和标签>内部）替换 my和 my <code>。
I appreciate any help, Thanks.
我感谢任何帮助，谢谢。
UPDATE:
更新：
I managed to get it working nice how @Prisoner explained, it's very nifty, however this in my particular case needed a little extending because I have more than one block of code with the .codeItclass, so I had to make it check each element and output... otherwise it would keep making the same output (like the first block)
我设法让它很好地工作，@Prisoner 如何解释，它非常漂亮，但是在我的特殊情况下需要一点扩展，因为我有不止一个.codeIt类的代码块，所以我不得不检查每个元素和输出...否则它会继续产生相同的输出（如第一个块）
Here is the fiddle
这是小提琴
Thanks to everyone for their answers.
感谢大家的回答。
回答by Prisoner
Assuming you just want to escape all HTML:
假设您只想转义所有 HTML：
$(".codeIt").text($(".codeIt").html());
回答by SmokeyPHP
Plain JS for single codeelement
单个code元素的纯 JS
var myCode = document.getElementById('mycode');
myCode.innerHTML = myCode.innerHTML.replace(/</g,'<').replace(/>/g,'>')
Plain JS for multiple codeelements
用于多个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,'<').replace(/>/g,'>')
}
}
or jQuery
或 jQuery
$(".codeIt").each(function() {
$(this).html(
$(this).html().replace(/</g,'<').replace(/>/g,'>')
);
});
回答by harpax
You could use the text function of jquery:
您可以使用 jquery 的文本功能：
var myText = $('.codeIt').html();
var escapedText = $('.codeIt').text(myText).html();
回答by mikach
var t = $('.codeIt').html();
$('.codeIt').text(t).html();
Look at this fiddle http://jsfiddle.net/kU8bV/1/
看看这个小提琴http://jsfiddle.net/kU8bV/1/
回答by Guillaume Lehezee
Assuming you want to code all the html in codeIt class :
假设您想对 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>
回答by Raidri supports Monica
$('code').html($('code').html().replace(/</g, '<').replace(/>/g, '>'));
