将标签转换为HTML实体

Question

是否可以使用JavaScript / jQuery以任何方式（例如正则表达式或其他方式）将HTML标记转换为HTML实体？如果是，那么如何操作？

示例：

<div> 应该被转换为 <div>

注意： 我不是在谈论服务器端语言。

- Sarfraz

Answer 1

尝试使用此函数处理HTML特殊字符：

function htmlencode(str) {
    return str.replace(/[&<>"']/g, function($0) {
        return "&" + {"&":"amp", "<":"lt", ">":"gt", '"':"quot", "'":"#39"}[$0] + ";";
    });
}

- Gumbo

---

为什么不使用 apos 而是使用 #39？ - Eli Grey

@Eli Grey：apos实体在XML 1.0中被引入（因此为XHTML定义），但在HTML 4中未定义。（请参见http://www.w3.org/TR/xhtml1/#C_16） - Gumbo

多么棒的一小段代码啊！花了我一分钟才看出你在做什么！你让我的晚上变得美好了。 - Benji XVI

返回 "&" + {"&":"amp", "<":"lt", ">":"gt", '"':"quot", "'":"#39"}[$0] -> 这是仅在JS正则表达式中存在的东西吗？从我所看到的，它会比较数组·[$0]中匹配模式和我们定义的字面对象之间的差异。我以前从未遇到过这样的语法，我觉得它非常方便，如果有其他类似的提示，我很感兴趣。 - Azuk

@Azuk $0是一个变量，它保存整个模式匹配的字符串。它被用来在对象中查找映射值，该对象使用字符类[&<>"']中的字符作为属性名，并返回相应的属性值。你也可以使用一个变量来保存这个对象，比如var map = {…}，然后用 map[$0] 访问它。表示法{…}[$0]只是更紧凑，但不幸的是不太明显。 - Gumbo

Answer 2

由于您标记了jQuery，因此使用基于jQuery的解决方案应该适用于您：

$("<div>").text("<div>bleh</div>whatever").html()

将文本方法的参数替换为您想要转义的任何标记。

- Jörn Zaefferer

Answer 3

我有两种快速且规模较小的HTML安全编码实现方法。

您可以对字符串中的所有字符进行编码：

function encode(e){return e.replace(/[^]/g,function(e){return"&#"+e.charCodeAt(0)+";"})}

或者只针对需要担心的主要字符进行目标定位（&, inebreaks, <, >, " 和 '），例如：

function encode(r){
return r.replace(/[\x26\x0A\<>'"]/g,function(r){return"&#"+r.charCodeAt(0)+";"})
}

var myString='Encode HTML entities!\n"Safe" escape <script></'+'script> & other tags!';

test.value=encode(myString);

testing.innerHTML=encode(myString);

/*************
* \x26 is &ampersand (it has to be first),
* \x0A is newline,
*************/

<p><b>What JavaScript Generated:</b></p>

<textarea id=test rows="3" cols="55"></textarea>

<p><b>What It Renders Too In HTML:</b></p>

<div id="testing">www.WHAK.com</div>

- Dave Brown

Answer 4

使用jQuery：

$('<div/>').text('This is fun & stuff').html(); // evaluates to "This is fun &amp; stuff"

http://debuggable.com/posts/encode-html-entities-with-jquery:480f4dd6-13cc-4ce9-8071-4710cbdd56cb

- riotera

Answer 5

如果您有变量并想将其插入到 div 中，可以调用 text()。

var myVar = "<span><strong>Some vars</strong> Some var extra</span>";
$("div").text(myVar);

- metrobalderas

Answer 6

使用String.prototype.replace()和正则表达式可以简洁地完成此操作，具体如下：

var tag = "<h1>This should </h1>be bold<h2> and big</h2>";
var escapedTag = tag.replace(/</g, "&lt;").replace(/>/g, "&gt;");

- software_writer

Answer 7

var d = "<div>"
d = d.replace(/<|>/g, function(chr){
    return chr == "<" ? "&lt;" : "&gt;"
})
console.log(d)

- mwilcox