blocks|key|5163887|text|由于您使用的是jQuery，因此可以只设置元素的text属性：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5163888|//+before:
//+<div+class="someClass">text</div>
var+someHtmlString+=+"<script>alert('hi!');</script>";

//+set+a+DIV's+text:
$("div.someClass").text(someHtmlString);
//+after:+
//+<div+class="someClass">&lt;script&gt;alert('hi!');&lt;/script&gt;</div>

//+get+the+text+in+a+string:
var+escaped+=+$("<div>").text(someHtmlString).html();
//+value:+
//+&lt;script&gt;alert('hi!');&lt;/script&gt;|code-block|syntax|javascript|5163889|entityMap|0|LINK|mutability|MUTABLE|url|https://jquery.com/|1|http://api.jquery.com/text/^0|O|4|7|6|0|O|4|1|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]|$9|10|A|11|1|12]]|E|$]]|$1|F|3|G|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]|S|$5|N|O|P|E|$Q|T]]]]

Since you're using <a href="https://jquery.com/" rel="noreferrer">jQuery</a>, you can just set the element's <a href="http://api.jquery.com/text/" rel="noreferrer"><code>text</code></a> property:

<pre><code>// before:
// &lt;div class="someClass"&gt;text&lt;/div&gt;
var someHtmlString = "&lt;script&gt;alert('hi!');&lt;/script&gt;";

// set a DIV's text:
$("div.someClass").text(someHtmlString);
// after: 
// &lt;div class="someClass"&gt;&amp;lt;script&amp;gt;alert('hi!');&amp;lt;/script&amp;gt;&lt;/div&gt;

// get the text in a string:
var escaped = $("&lt;div&gt;").text(someHtmlString).html();
// value: 
// &amp;lt;script&amp;gt;alert('hi!');&amp;lt;/script&amp;gt;
</code></pre>

blocks|key|3753285|text|还有the+solution+from+mustache.js|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3753286|var+entityMap+=+{
++'&':+'&amp;',
++'<':+'&lt;',
++'>':+'&gt;',
++'"':+'&quot;',
++"'":+'&#39;',
++'/':+'&#x2F;',
++'`':+'&#x60;',
++'=':+'&#x3D;'
};

function+escapeHtml+(string)+{
++return+String(string).replace(/[&<>"'`=\/]/g,+function+(s)+{
++++return+entityMap[s];
++});
}|code-block|syntax|javascript|3753287|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/janl/mustache.js/blob/master/mustache.js#L73^0|2|T|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

There is also <a href="https://github.com/janl/mustache.js/blob/master/mustache.js#L73" rel="noreferrer">the solution from mustache.js</a>

<pre><code>var entityMap = {
 '&amp;': '&amp;amp;',
 '&lt;': '&amp;lt;',
 '&gt;': '&amp;gt;',
 '"': '&amp;quot;',
 "'": '&amp;#39;',
 '/': '&amp;#x2F;',
 '`': '&amp;#x60;',
 '=': '&amp;#x3D;'
};

function escapeHtml (string) {
 return String(string).replace(/[&amp;&lt;&gt;"'`=\/]/g, function (s) {
 return entityMap[s];
 });
}
</code></pre>

blocks|key|711907|text|$('<div/>').text('This+is+fun+&+stuff').html();+//+"This+is+fun+&amp;+stuff"|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|711908|来源：http://debuggable.com/posts/encode-html-entities-with-jquery:480f4dd6-13cc-4ce9-8071-4710cbdd56cb|unstyled|offset|length|711909|entityMap|0|LINK|mutability|MUTABLE|url|http://debuggable.com/posts/encode-html-entities-with-jquery:480f4dd6-13cc-4ce9-8071-4710cbdd56cb^0|0|3|2P|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

<pre><code>$('&lt;div/&gt;').text('This is fun &amp; stuff').html(); // "This is fun &amp;amp; stuff"
</code></pre>

Source: <a href="http://debuggable.com/posts/encode-html-entities-with-jquery:480f4dd6-13cc-4ce9-8071-4710cbdd56cb" rel="noreferrer">http://debuggable.com/posts/encode-html-entities-with-jquery:480f4dd6-13cc-4ce9-8071-4710cbdd56cb</a>

blocks|key|5163862|text|如果你是为了HTML而转义，我认为只有三个是真正需要的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5163863|html.replace(/&/g,+"&amp;").replace(/</g,+"&lt;").replace(/>/g,+"&gt;");|code-block|syntax|javascript|5163864|根据您的用例，您可能还需要对&quot;执行"等操作。如果列表足够大，我会使用一个数组：|offset|length|style|CODE|5163865|var+escaped+=+html;
var+findReplace+=+[[/&/g,+"&amp;"],+[/</g,+"&lt;"],+[/>/g,+"&gt;"],+[/"/g,+"&quot;"]]
for(var+item+in+findReplace)
++++escaped+=+escaped.replace(findReplace[item][0],+findReplace[item][1]);|5163866|encodeURIComponent()只会对URL进行转义，不会对HTML进行转义。|5163867|entityMap^0|0|0|E|6|M|1|0|0|0|K|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@$I|V|J|W|K|L]|$I|X|J|Y|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|10|8|@$I|11|J|12|K|L]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|R|$]]

If you're escaping for HTML, there are only three that I can think of that would be really necessary:

<pre><code>html.replace(/&amp;/g, "&amp;amp;").replace(/&lt;/g, "&amp;lt;").replace(/&gt;/g, "&amp;gt;");
</code></pre>

Depending on your use case, you might also need to do things like <code>"</code> to <code>&amp;quot;</code>. If the list got big enough, I'd just use an array:

<pre><code>var escaped = html;
var findReplace = [[/&amp;/g, "&amp;amp;"], [/&lt;/g, "&amp;lt;"], [/&gt;/g, "&amp;gt;"], [/"/g, "&amp;quot;"]]
for(var item in findReplace)
 escaped = escaped.replace(findReplace[item][0], findReplace[item][1]);
</code></pre>

<code>encodeURIComponent()</code> will only escape it for URLs, not for HTML.

blocks|key|712208|text|很容易使用下划线：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|712209|_.escape(string)+|code-block|syntax|javascript|712210|Underscore是一个实用程序库，它提供了很多原生js无法提供的功能。还有lodash，它和underscore的应用编程接口相同，但经过重写后性能更高。|offset|length|712211|entityMap|0|LINK|mutability|MUTABLE|url|http://underscorejs.org/|1|https://lodash.com/^0|0|0|0|A|0|13|6|1|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@$I|X|J|Y|1|Z]|$I|10|J|11|1|12]]|A|$]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]|S|$5|N|O|P|A|$Q|T]]]]

Easy enough to use underscore:

<pre><code>_.escape(string) 
</code></pre>

<a href="http://underscorejs.org">Underscore</a> is a utility library that provides a lot of features that native js doesn't provide. There's also <a href="https://lodash.com/">lodash</a> which is the same API as underscore but was rewritten to be more performant.

blocks|key|707218|text|我写了一个很小的函数来做这件事。它只对"、&、<和>进行转义(但通常这些都是你需要的)。它比之前提出的解决方案稍微优雅一些，因为它只使用一个.replace()来完成所有的转换。(编辑2:降低了代码复杂性，使函数更小更整洁，如果您对原始代码感兴趣，请参阅本答案的末尾。)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|BOLD|entityRanges|data|707219|function+escapeHtml(text)+{
++++'use+strict';
++++return+text.replace(/[\"&<>]/g,+function+(a)+{
++++++++return+{+'"':+'&quot;',+'&':+'&amp;',+'<':+'&lt;',+'>':+'&gt;'+}[a];
++++});
}|code-block|syntax|javascript|707220|这是普通的Javascript，没有使用jQuery。|707221|也在转义/和'|707222|响应+mklement's注释的编辑。|707223|上面的函数可以很容易地扩展为包括任何字符。要指定更多要转义的字符，只需将它们同时插入到正则表达式的字符类中(即在/[...]/g中)，并作为chr对象中的一个条目。(EDIT+2:也以同样的方式缩短了这个功能。)|707224|function+escapeHtml(text)+{
++++'use+strict';
++++return+text.replace(/[\"&'\/<>]/g,+function+(a)+{
++++++++return+{
++++++++++++'"':+'&quot;',+'&':+'&amp;',+"'":+'&#39;',
++++++++++++'/':+'&#47;',++'<':+'&lt;',++'>':+'&gt;'
++++++++}[a];
++++});
}|707225|注意上面对撇号的使用(符号实体&apos;可能已经被使用了-它是在&#39;中定义的，但最初并不包含在HTML规范中，因此可能不是所有浏览器都支持它。参见：Wikipedia+article+on+HTML+character+encodings)。我还记得在某个地方读到过，使用十进制实体比使用十六进制更受支持，但我现在似乎找不到它的来源。(而且不会有很多浏览器不支持十六进制实体。)|707226|注意：将/和'添加到转义字符列表并不是那么有用，因为它们在中没有任何特殊含义，也不需要进行转义。|707227|原始escapeHtml函数|707228|EDIT+2:原始函数使用一个变量(chr)来存储.replace()回调所需的对象。这个变量还需要一个额外的匿名函数来确定它的作用域，这使得该函数(不必要地)变得更大和更复杂。|707229|var+escapeHtml+=+(function+()+{
++++'use+strict';
++++var+chr+=+{+'"':+'&quot;',+'&':+'&amp;',+'<':+'&lt;',+'>':+'&gt;'+};
++++return+function+(text)+{
++++++++return+text.replace(/[\"&<>]/g,+function+(a)+{+return+chr[a];+});
++++};
}());|707230|我还没有测试两个版本中哪一个更快。如果你这样做，请随时在这里添加有关它的信息和链接。|707231|entityMap|0|LINK|mutability|MUTABLE|url|http://en.wikipedia.org/wiki/Character_encodings_in_HTML#HTML_character_references^0|J|1|L|1|N|1|P|1|1Y|A|2I|4|0|0|0|4|1|6|1|0|3|G|0|0|2Y|1K|8|1Y|3|0|0|0|5D|F|6|X|5|26|19|0|0|0|T|4|1|6|1|0|2|A|0|0|7|I|3|P|A|0|0|0^^$0|@$1|2|3|4|5|6|7|1F|8|@$9|1G|A|1H|B|C]|$9|1I|A|1J|B|C]|$9|1K|A|1L|B|C]|$9|1M|A|1N|B|C]|$9|1O|A|1P|B|C]|$9|1Q|A|1R|B|D]]|E|@]|F|$]]|$1|G|3|H|5|I|7|1S|8|@]|E|@]|F|$J|K]]|$1|L|3|M|5|6|7|1T|8|@]|E|@]|F|$]]|$1|N|3|O|5|6|7|1U|8|@$9|1V|A|1W|B|C]|$9|1X|A|1Y|B|C]]|E|@]|F|$]]|$1|P|3|Q|5|6|7|1Z|8|@$9|20|A|21|B|D]]|E|@]|F|$]]|$1|R|3|S|5|6|7|22|8|@$9|23|A|24|B|D]|$9|25|A|26|B|C]|$9|27|A|28|B|C]]|E|@]|F|$]]|$1|T|3|U|5|I|7|29|8|@]|E|@]|F|$J|K]]|$1|V|3|W|5|6|7|2A|8|@$9|2B|A|2C|B|D]|$9|2D|A|2E|B|C]|$9|2F|A|2G|B|C]]|E|@$9|2H|A|2I|1|2J]]|F|$]]|$1|X|3|Y|5|6|7|2K|8|@$9|2L|A|2M|B|D]|$9|2N|A|2O|B|C]|$9|2P|A|2Q|B|C]]|E|@]|F|$]]|$1|Z|3|10|5|6|7|2R|8|@$9|2S|A|2T|B|C]]|E|@]|F|$]]|$1|11|3|12|5|6|7|2U|8|@$9|2V|A|2W|B|D]|$9|2X|A|2Y|B|C]|$9|2Z|A|30|B|C]]|E|@]|F|$]]|$1|13|3|14|5|I|7|31|8|@]|E|@]|F|$J|K]]|$1|15|3|16|5|6|7|32|8|@]|E|@]|F|$]]|$1|17|3|-4|5|6|7|33|8|@]|E|@]|F|$]]]|18|$19|$5|1A|1B|1C|F|$1D|1E]]]]

I wrote a tiny little function which does this. It only escapes <code>"</code>, <code>&amp;</code>, <code>&lt;</code> and <code>&gt;</code> (but usually that's all you need anyway). It is slightly more elegant then the earlier proposed solutions in that it only uses one <code>.replace()</code> to do all the conversion. (EDIT 2: Reduced code complexity making the function even smaller and neater, if you're curious about the original code see end of this answer.)

<pre><code>function escapeHtml(text) {
 'use strict';
 return text.replace(/[\"&amp;&lt;&gt;]/g, function (a) {
 return { '"': '&amp;quot;', '&amp;': '&amp;amp;', '&lt;': '&amp;lt;', '&gt;': '&amp;gt;' }[a];
 });
}
</code></pre>

This is plain Javascript, no jQuery used.

<h2>Escaping <code>/</code> and <code>'</code> too</h2>

Edit in response to mklement's comment.

The above function can easily be expanded to include any character. To specify more characters to escape, simply insert them both in the character class in the regular expression (i.e. inside the <code>/[...]/g</code>) and as an entry in the <code>chr</code> object. (EDIT 2: Shortened this function too, in the same way.)

<pre><code>function escapeHtml(text) {
 'use strict';
 return text.replace(/[\"&amp;'\/&lt;&gt;]/g, function (a) {
 return {
 '"': '&amp;quot;', '&amp;': '&amp;amp;', "'": '&amp;#39;',
 '/': '&amp;#47;', '&lt;': '&amp;lt;', '&gt;': '&amp;gt;'
 }[a];
 });
}
</code></pre>

Note the above use of <code>&amp;#39;</code> for apostrophe (the symbolic entity <code>&amp;apos;</code> might have been used instead – it is defined in XML, but was originally not included in the HTML spec and might therefore not be supported by all browsers. See: <a href="http://en.wikipedia.org/wiki/Character_encodings_in_HTML#HTML_character_references">Wikipedia article on HTML character encodings</a>). I also recall reading somewhere that using decimal entities is more widely supported than using hexadecimal, but I can't seem to find the source for that now though. (And there cannot be many browsers out there which does not support the hexadecimal entities.)

Note: Adding <code>/</code> and <code>'</code> to the list of escaped characters isn't all that useful, since they do not have any special meaning in HTML and do not need to be escaped.

<h2>Original <code>escapeHtml</code> Function</h2>

EDIT 2: The original function used a variable (<code>chr</code>) to store the object needed for the <code>.replace()</code> callback. This variable also needed an extra anonymous function to scope it, making the function (needlessly) a little bit bigger and more complex.

<pre><code>var escapeHtml = (function () {
 'use strict';
 var chr = { '"': '&amp;quot;', '&amp;': '&amp;amp;', '&lt;': '&amp;lt;', '&gt;': '&amp;gt;' };
 return function (text) {
 return text.replace(/[\"&amp;&lt;&gt;]/g, function (a) { return chr[a]; });
 };
}());
</code></pre>

I haven't tested which of the two versions are faster. If you do, feel free to add info and links about it here.

blocks|key|2909596|text|我知道我参加这个聚会有多晚，但我有一个非常简单的解决方案，它不需要jQuery。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2909597|escaped+=+new+Option(unescaped).innerHTML;|code-block|syntax|javascript|2909598|编辑:这不会转义引号。唯一需要转义引号的情况是将内容内联粘贴到HTML字符串中的属性。我很难想象这样做会是一个好的设计。|2909599|编辑3:要获得最快的解决方案，请检查上面来自Saram的答案。这个是最短的。|2909600|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I realize how late I am to this party, but I have a very easy solution that does not require jQuery.

<pre><code>escaped = new Option(unescaped).innerHTML;
</code></pre>

Edit: This does not escape quotes. The only case where quotes would need to be escaped is if the content is going to be pasted inline to an attribute within an HTML string. It is hard for me to imagine a case where doing this would be good design.

Edit 3: For the fastest solution, check the answer above from Saram. This one is the shortest.

blocks|key|2908827|text|下面是一个干净的JavaScript函数。它会将文本转义为“几个<许多”这样的文本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2908828|function+escapeHtmlEntities+(str)+{
++if+(typeof+jQuery+!==+'undefined')+{
++++//+Create+an+empty+div+to+use+as+a+container,
++++//+then+put+the+raw+text+in+and+get+the+HTML
++++//+equivalent+out.
++++return+jQuery('<div/>').text(str).html();
++}

++//+No+jQuery,+so+use+string+replace.
++return+str
++++.replace(/&/g,+'&amp;')
++++.replace(/>/g,+'&gt;')
++++.replace(/</g,+'&lt;')
++++.replace(/"/g,+'&quot;')
++++.replace(/'/g,+'&apos;');
}|code-block|syntax|javascript|2908829|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Here is a clean, clear JavaScript function. It will escape text such as "a few &lt; many" into "a few &amp;lt; many".

<pre><code>function escapeHtmlEntities (str) {
 if (typeof jQuery !== 'undefined') {
 // Create an empty div to use as a container,
 // then put the raw text in and get the HTML
 // equivalent out.
 return jQuery('&lt;div/&gt;').text(str).html();
 }

 // No jQuery, so use string replace.
 return str
 .replace(/&amp;/g, '&amp;amp;')
 .replace(/&gt;/g, '&amp;gt;')
 .replace(/&lt;/g, '&amp;lt;')
 .replace(/"/g, '&amp;quot;')
 .replace(/'/g, '&amp;apos;');
}
</code></pre>

blocks|key|5164504|text|经过最后的测试，我可以推荐+tests+和完全跨浏览器+compatible+native+javaScript+(DOM)解决方案：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|5164505|function+HTMLescape(html){
++++return+document.createElement('div')
++++++++.appendChild(document.createTextNode(html))
++++++++.parentNode
++++++++.innerHTML
}|code-block|syntax|javascript|5164506|如果你重复多次，你可以用一次准备好的变量来做：|5164507|//prepare+variables
var+DOMtext+=+document.createTextNode("test");
var+DOMnative+=+document.createElement("span");
DOMnative.appendChild(DOMtext);

//main+work+for+each+case
function+HTMLescape(html){
++DOMtext.nodeValue+=+html;
++return+DOMnative.innerHTML
}|5164508|看看我的最终性能comparison+(stack+question)。|5164509|entityMap|0|LINK|mutability|MUTABLE|url|http://jsperf.com/htmlencoderegex/35|1|https://stackoverflow.com/a/17450136/1828986^0|D|7|N|4|13|H|0|0|0|0|8|A|0|K|E|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]|$9|15|A|16|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|17|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|18|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|19|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|1A|8|@]|D|@$9|1B|A|1C|1|1D]|$9|1E|A|1F|1|1G]]|E|$]]|$1|Q|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]|Y|$5|T|U|V|E|$W|Z]]]]

After last tests I can recommend fastest and completely cross browser compatible native javaScript (DOM) solution:

<pre><code>function HTMLescape(html){
 return document.createElement('div')
 .appendChild(document.createTextNode(html))
 .parentNode
 .innerHTML
}
</code></pre>

If you repeat it many times you can do it with once prepared variables:

<pre><code>//prepare variables
var DOMtext = document.createTextNode("test");
var DOMnative = document.createElement("span");
DOMnative.appendChild(DOMtext);

//main work for each case
function HTMLescape(html){
 DOMtext.nodeValue = html;
 return DOMnative.innerHTML
}
</code></pre>

Look at my final performance <a href="http://jsperf.com/htmlencoderegex/35" rel="noreferrer">comparison</a> (<a href="https://stackoverflow.com/a/17450136/1828986">stack question</a>).

blocks|key|5164143|text|试试Underscore.string库，它可以和jQuery一起工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|5164144|_.str.escapeHTML('<div>Blah+blah+blah</div>')|code-block|syntax|javascript|5164145|输出：|5164146|'&lt;div&gt;Blah+blah+blah&lt;/div&gt;'|5164147|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/epeli/underscore.string^0|2|H|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

Try <a href="https://github.com/epeli/underscore.string" rel="noreferrer">Underscore.string</a> lib, it works with jQuery.

<pre><code>_.str.escapeHTML('&lt;div&gt;Blah blah blah&lt;/div&gt;')
</code></pre>

output:

<pre><code>'&amp;lt;div&amp;gt;Blah blah blah&amp;lt;/div&amp;gt;'
</code></pre>

blocks|key|707046|text|escape()和unescape()用于编码/解码URL字符串，而不是HTML.|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|707047|实际上，我使用以下代码片段来完成不需要任何框架的技巧：|707048|var+escapedHtml+=+html.replace(/&/g,+'&amp;')
++++++++++++++++++++++.replace(/>/g,+'&gt;')
++++++++++++++++++++++.replace(/</g,+'&lt;')
++++++++++++++++++++++.replace(/"/g,+'&quot;')
++++++++++++++++++++++.replace(/'/g,+'&apos;');|code-block|syntax|javascript|707049|entityMap^0|0|8|9|A|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|U|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

<code>escape()</code> and <code>unescape()</code> are intended to encode / decode strings for URLs, not HTML.

Actually, I use the following snippet to do the trick that doesn't require any framework:

<pre><code>var escapedHtml = html.replace(/&amp;/g, '&amp;amp;')
 .replace(/&gt;/g, '&amp;gt;')
 .replace(/&lt;/g, '&amp;lt;')
 .replace(/"/g, '&amp;quot;')
 .replace(/'/g, '&amp;apos;');
</code></pre>

blocks|key|2909092|text|我对mustache.js示例进行了增强，将escapeHTML()方法添加到string对象。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2909093|var+__entityMap+=+{
++++"&":+"&amp;",
++++"<":+"&lt;",
++++">":+"&gt;",
++++'"':+'&quot;',
++++"'":+'&#39;',
++++"/":+'&#x2F;'
};

String.prototype.escapeHTML+=+function()+{
++++return+String(this).replace(/[&<>"'\/]/g,+function+(s)+{
++++++++return+__entityMap[s];
++++});
}|code-block|syntax|javascript|2909094|这样就很容易使用"Some+<text>,+more+Text&Text".escapeHTML()了|2909095|entityMap^0|M|C|0|0|8|16|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

I've enhanced the mustache.js example adding the <code>escapeHTML()</code> method to the string object.

<pre><code>var __entityMap = {
 "&amp;": "&amp;amp;",
 "&lt;": "&amp;lt;",
 "&gt;": "&amp;gt;",
 '"': '&amp;quot;',
 "'": '&amp;#39;',
 "/": '&amp;#x2F;'
};

String.prototype.escapeHTML = function() {
 return String(this).replace(/[&amp;&lt;&gt;"'\/]/g, function (s) {
 return __entityMap[s];
 });
}
</code></pre>

That way it is quite easy to use <code>"Some &lt;text&gt;, more Text&amp;Text".escapeHTML()</code>

blocks|key|2909322|text|如果你有underscore.js，使用_.escape+(比上面的jQuery方法更有效)：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2909323|_.escape('Curly,+Larry+&+Moe');+//+returns:+Curly,+Larry+&amp;+Moe|code-block|syntax|javascript|2909324|entityMap^0|K|8|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

If you have underscore.js, use <code>_.escape</code> (more efficient than the jQuery method posted above):

<pre><code>_.escape('Curly, Larry &amp; Moe'); // returns: Curly, Larry &amp;amp; Moe
</code></pre>

blocks|key|711917|text|如果您使用正则表达式，那么在上面的tghw示例中有一个错误。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|711918|

var+escaped+=+html;+
var+findReplace+=+[[/&/g,+"&amp;"],+[/</g,+"&lt;"],+[/>/g,"&gt;"],+[/"/g,
"&quot;"]]

for(var+item+in+findReplace)+{
+++++escaped+=+escaped.replace(item[0],+item[1]);+++
}




var+escaped+=+html;
var+findReplace+=+[[/&/g,+"&amp;"],+[/</g,+"&lt;"],+[/>/g,+"&gt;"],+[/"/g,+"&quot;"]]

for(var+item+in+findReplace)+{
+++++escaped+=+escaped.replace(findReplace[item[0]],+findReplace[item[1]]);
}|code-block|syntax|javascript|711919|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If your're going the regex route, there's an error in tghw's example above.

<pre><code>&lt;!-- WON'T WORK - item[0] is an index, not an item --&gt;

var escaped = html; 
var findReplace = [[/&amp;/g, "&amp;amp;"], [/&lt;/g, "&amp;lt;"], [/&gt;/g,"&amp;gt;"], [/"/g,
"&amp;quot;"]]

for(var item in findReplace) {
 escaped = escaped.replace(item[0], item[1]); 
}


&lt;!-- WORKS - findReplace[item[]] correctly references contents --&gt;

var escaped = html;
var findReplace = [[/&amp;/g, "&amp;amp;"], [/&lt;/g, "&amp;lt;"], [/&gt;/g, "&amp;gt;"], [/"/g, "&amp;quot;"]]

for(var item in findReplace) {
 escaped = escaped.replace(findReplace[item[0]], findReplace[item[1]]);
}
</code></pre>

blocks|key|5164229|text|这是一个很好的安全示例。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5164230|function+escapeHtml(str)+{
++++if+(typeof(str)+==+"string"){
++++++++try{
++++++++++++var+newStr+=+"";
++++++++++++var+nextCode+=+0;
++++++++++++for+(var+i+=+0;i+<+str.length;i%2B%2B){
++++++++++++++++nextCode+=+str.charCodeAt(i);
++++++++++++++++if+(nextCode+>+0+&&+nextCode+<+128){
++++++++++++++++++++newStr+%2B=+"&#"%2BnextCode%2B";";
++++++++++++++++}
++++++++++++++++else{
++++++++++++++++++++newStr+%2B=+"?";
++++++++++++++++}
+++++++++++++}
+++++++++++++return+newStr;
++++++++}
++++++++catch(err){
++++++++}
++++}
++++else{
++++++++return+str;
++++}
}|code-block|syntax|javascript|5164231|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This is a nice safe example...

<pre><code>function escapeHtml(str) {
 if (typeof(str) == "string"){
 try{
 var newStr = "";
 var nextCode = 0;
 for (var i = 0;i &lt; str.length;i++){
 nextCode = str.charCodeAt(i);
 if (nextCode &gt; 0 &amp;&amp; nextCode &lt; 128){
 newStr += "&amp;#"+nextCode+";";
 }
 else{
 newStr += "?";
 }
 }
 return newStr;
 }
 catch(err){
 }
 }
 else{
 return str;
 }
}
</code></pre>

blocks|key|5164597|text|使用vanilla+js可以很容易地做到这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5164598|只需在文档中添加一个文本节点。它将被浏览器转义。|5164599|var+escaped+=+document.createTextNode("<HTML+TO/ESCAPE/>")
document.getElementById("[PARENT_NODE]").appendChild(escaped)|code-block|syntax|javascript|5164600|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You can easily do it with vanilla js.

Simply add a text node the document. 
It will be escaped by the browser.

<pre><code>var escaped = document.createTextNode("&lt;HTML TO/ESCAPE/&gt;")
document.getElementById("[PARENT_NODE]").appendChild(escaped)
</code></pre>

blocks|key|5164790|text|2个不需要JQUERY的简单方法...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5164791|您可以对字符串中的所有字符进行编码，如下所示：|offset|length|style|BOLD|5164792|function+encode(e){return+e.replace(/[%5E]/g,function(e){return"&#"%2Be.charCodeAt(0)%2B";"})}|code-block|syntax|javascript|5164793|或者只是针对主要人物来担心&，换行符，<，>，"和'，比如：|CODE|5164794|​|5164795|function+encode(r){
return+r.replace(/[\x26\x0A\<>'"]/g,function(r){return"&#"%2Br.charCodeAt(0)%2B";"})
}

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

test.value=encode(myString);

testing.innerHTML=encode(myString);

/*************
*+\x26+is+&ampersand+(it+has+to+be+first),
*+\x0A+is+newline,
*************/|5164796|What+JavaScript+Generated:

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

What+It+Renders+Too+In+HTML:

<div+id="testing">www.WHAK.com</div>|5164797|5164798|entityMap^0|0|F|8|0|0|0|A|D|1|J|1|L|1|N|1|P|1|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@$D|10|E|11|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|12|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|13|8|@$D|14|E|15|F|G]|$D|16|E|17|F|O]|$D|18|E|19|F|O]|$D|1A|E|1B|F|O]|$D|1C|E|1D|F|O]|$D|1E|E|1F|F|O]]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1G|8|@]|9|@]|A|$]]|$1|R|3|S|5|J|7|1H|8|@]|9|@]|A|$K|L]]|$1|T|3|U|5|J|7|1I|8|@]|9|@]|A|$K|L]]|$1|V|3|Q|5|6|7|1J|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1K|8|@]|9|@]|A|$]]]|X|$]]

2 simple methods that require NO JQUERY...

You can encode all characters in your string like this:

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

Or just target the main characters to worry about <code>&amp;</code>, line breaks, <code>&lt;</code>, <code>&gt;</code>, <code>"</code> and <code>'</code> like:

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function encode(r){
return r.replace(/[\x26\x0A\&lt;&gt;'"]/g,function(r){return"&amp;#"+r.charCodeAt(0)+";"})
}

var myString='Encode HTML entities!\n"Safe" escape &lt;script&gt;&lt;/'+'script&gt; &amp; other tags!';

test.value=encode(myString);

testing.innerHTML=encode(myString);

/*************
* \x26 is &amp;ampersand (it has to be first),
* \x0A is newline,
*************/</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;&lt;b&gt;What JavaScript Generated:&lt;/b&gt;&lt;/p&gt;

&lt;textarea id=test rows="3" cols="55"&gt;&lt;/textarea&gt;

&lt;p&gt;&lt;b&gt;What It Renders Too In HTML:&lt;/b&gt;&lt;/p&gt;

&lt;div id="testing"&gt;www.WHAK.com&lt;/div&gt;</code></pre>
</div>
</div>

blocks|key|3753554|text|(function(undefined){
++++var+charsToReplace+=+{
++++++++'&':+'&amp;',
++++++++'<':+'&lt;',
++++++++'>':+'&gt;'
++++};

++++var+replaceReg+=+new+RegExp("["+%2B+Object.keys(charsToReplace).join("")+%2B+"]",+"g");
++++var+replaceFn+=+function(tag){+return+charsToReplace[tag]+%7C%7C+tag;+};

++++var+replaceRegF+=+function(replaceMap)+{
++++++++return+(new+RegExp("["+%2B+Object.keys(charsToReplace).concat(Object.keys(replaceMap)).join("")+%2B+"]",+"gi"));
++++};
++++var+replaceFnF+=+function(replaceMap)+{
++++++++return+function(tag){+return+replaceMap[tag]+%7C%7C+charsToReplace[tag]+%7C%7C+tag;+};
++++};

++++String.prototype.htmlEscape+=+function(replaceMap)+{
++++++++if+(replaceMap+===+undefined)+return+this.replace(replaceReg,+replaceFn);
++++++++return+this.replace(replaceRegF(replaceMap),+replaceFnF(replaceMap));
++++};
})();|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3753555|没有全局变量，一些内存优化。用法：|unstyled|3753556|"some<tag>and&symbol©".htmlEscape({'©':+'&copy;'})|3753557|结果是：|3753558|"some&lt;tag&gt;and&amp;symbol&copy;"|3753559|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|I|3|J|5|F|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$B|C]]|$1|M|3|-4|5|F|7|T|8|@]|9|@]|A|$]]]|N|$]]

<pre><code>(function(undefined){
 var charsToReplace = {
 '&amp;': '&amp;amp;',
 '&lt;': '&amp;lt;',
 '&gt;': '&amp;gt;'
 };

 var replaceReg = new RegExp("[" + Object.keys(charsToReplace).join("") + "]", "g");
 var replaceFn = function(tag){ return charsToReplace[tag] || tag; };

 var replaceRegF = function(replaceMap) {
 return (new RegExp("[" + Object.keys(charsToReplace).concat(Object.keys(replaceMap)).join("") + "]", "gi"));
 };
 var replaceFnF = function(replaceMap) {
 return function(tag){ return replaceMap[tag] || charsToReplace[tag] || tag; };
 };

 String.prototype.htmlEscape = function(replaceMap) {
 if (replaceMap === undefined) return this.replace(replaceReg, replaceFn);
 return this.replace(replaceRegF(replaceMap), replaceFnF(replaceMap));
 };
})();
</code></pre>

No global variables, some memory optimization.
Usage: 

<pre><code>"some&lt;tag&gt;and&amp;symbol©".htmlEscape({'©': '&amp;copy;'})
</code></pre>

result is: 

<pre><code>"some&amp;lt;tag&amp;gt;and&amp;amp;symbol&amp;copy;"
</code></pre>

blocks|key|707594|text|简单的JavaScript转义示例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|707595|function+escapeHtml(text)+{
++++var+div+=+document.createElement('div');
++++div.innerText+=+text;
++++return+div.innerHTML;
}

escapeHtml("<script>alert('hi!');</script>")
//+"&lt;script&gt;alert('hi!');&lt;/script&gt;"|code-block|syntax|javascript|707596|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Plain JavaScript escaping example:

<pre><code>function escapeHtml(text) {
 var div = document.createElement('div');
 div.innerText = text;
 return div.innerHTML;
}

escapeHtml("&lt;script&gt;alert('hi!');&lt;/script&gt;")
// "&amp;lt;script&amp;gt;alert('hi!');&amp;lt;/script&amp;gt;"
</code></pre>

blocks|key|712462|text|适用于solution+from+mustache.js的ES6+one+liner|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|712463|const+escapeHTML+=+str+=>+(str%2B'').replace(/[&<>"'`=\/]/g,+s+=>+({'&':+'&amp;','<':+'&lt;','>':+'&gt;','"':+'&quot;',"'":+'&#39;','/':+'&#x2F;','`':+'&#x60;','=':+'&#x3D;'})[s]);|code-block|syntax|javascript|712464|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/janl/mustache.js/blob/master/mustache.js#L73^0|T|D|3|P|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@$9|V|A|W|1|X]]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

ES6 one liner for the <a href="https://github.com/janl/mustache.js/blob/master/mustache.js#L73" rel="nofollow noreferrer">solution from mustache.js</a>

<pre><code>const escapeHTML = str =&gt; (str+'').replace(/[&amp;&lt;&gt;"'`=\/]/g, s =&gt; ({'&amp;': '&amp;amp;','&lt;': '&amp;lt;','&gt;': '&amp;gt;','"': '&amp;quot;',"'": '&amp;#39;','/': '&amp;#x2F;','`': '&amp;#x60;','=': '&amp;#x3D;'})[s]);
</code></pre>

blocks|key|707069|text|function+htmlEscape(str)+{
++++var+stringval="";
++++$.each(str,+function+(i,+element)+{
++++++++alert(element);
++++++++stringval+%2B=+element
++++++++++++.replace(/&/g,+'&amp;')
++++++++++++.replace(/"/g,+'&quot;')
++++++++++++.replace(/'/g,+'&#39;')
++++++++++++.replace(/</g,+'&lt;')
++++++++++++.replace(/>/g,+'&gt;')
++++++++++++.replace('+',+'-')
++++++++++++.replace('?',+'-')
++++++++++++.replace(':',+'-')
++++++++++++.replace('%7C',+'-')
++++++++++++.replace('.',+'-');
++++});
++++alert(stringval);
++++return+String(stringval);
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|707070|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>function htmlEscape(str) {
 var stringval="";
 $.each(str, function (i, element) {
 alert(element);
 stringval += element
 .replace(/&amp;/g, '&amp;amp;')
 .replace(/"/g, '&amp;quot;')
 .replace(/'/g, '&amp;#39;')
 .replace(/&lt;/g, '&amp;lt;')
 .replace(/&gt;/g, '&amp;gt;')
 .replace(' ', '-')
 .replace('?', '-')
 .replace(':', '-')
 .replace('|', '-')
 .replace('.', '-');
 });
 alert(stringval);
 return String(stringval);
}
</code></pre>

blocks|key|3753564|text|function+htmlDecode(t){
+++if+(t)+return+$('<div+/>').html(t).text();
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3753565|像个魔法师一样工作|unstyled|3753566|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>function htmlDecode(t){
 if (t) return $('&lt;div /&gt;').html(t).text();
}
</code></pre>

works like a charm

blocks|key|707634|text|速度优化版本：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|707635|​|707636|function+escapeHtml(s)+{
+++let+out+=+"";
+++let+p2+=+0;
+++for+(let+p+=+0;+p+<+s.length;+p%2B%2B)+{
++++++let+r;
++++++switch+(s.charCodeAt(p))+{
+++++++++case+34:+r+=+"&quot;";+break;++//+"
+++++++++case+38:+r+=+"&amp;"+;+break;++//+&
+++++++++case+39:+r+=+"&#39;"+;+break;++//+'
+++++++++case+60:+r+=+'&lt;'++;+break;++//+<
+++++++++case+62:+r+=+'&gt;'++;+break;++//+>
+++++++++default:+continue;
++++++}
++++++if+(p2+<+p)+{
+++++++++out+%2B=+s.substring(p2,+p);
++++++}
++++++out+%2B=+r;
++++++p2+=+p+%2B+1;
+++}
+++if+(p2+==+0)+{
++++++return+s;
+++}
+++if+(p2+<+s.length)+{
++++++out+%2B=+s.substring(p2);
+++}
+++return+out;
}

const+s+=+"Hello+<World>!";
document.write(escapeHtml(s));
console.log(escapeHtml(s));|code-block|syntax|javascript|707637|707638|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

A speed-optimized version:
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function escapeHtml(s) {
 let out = "";
 let p2 = 0;
 for (let p = 0; p &lt; s.length; p++) {
 let r;
 switch (s.charCodeAt(p)) {
 case 34: r = "&amp;quot;"; break; // "
 case 38: r = "&amp;amp;" ; break; // &amp;
 case 39: r = "&amp;#39;" ; break; // '
 case 60: r = '&amp;lt;' ; break; // &lt;
 case 62: r = '&amp;gt;' ; break; // &gt;
 default: continue;
 }
 if (p2 &lt; p) {
 out += s.substring(p2, p);
 }
 out += r;
 p2 = p + 1;
 }
 if (p2 == 0) {
 return s;
 }
 if (p2 &lt; s.length) {
 out += s.substring(p2);
 }
 return out;
}

const s = "Hello &lt;World&gt;!";
document.write(escapeHtml(s));
console.log(escapeHtml(s));</code></pre>
</div>
</div>

blocks|key|5165114|text|用于转义html特殊格式(UTF-8)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5165115|function+htmlEscape(str)+{
++return+str
++++++.replace(/&/g,+'&amp;')
++++++.replace(/"/g,+'&quot;')
++++++.replace(/'/g,+'&#39;')
++++++.replace(/</g,+'&lt;')
++++++.replace(/>/g,+'&gt;')
++++++.replace(/\//g,+'&#x2F;')
++++++.replace(/=/g,++'&#x3D;')
++++++.replace(/`/g,+'&#x60;');
}|code-block|syntax|javascript|5165116|用于非转义html特殊格式(UTF-8)|5165117|function+htmlUnescape(str)+{
++return+str
++++++.replace(/&amp;/g,+'&')
++++++.replace(/&quot;/g,+'"')
++++++.replace(/&#39;/g,+"'")
++++++.replace(/&lt;/g,+'<')
++++++.replace(/&gt;/g,+'>')
++++++.replace(/&#x2F/g,+'/')
++++++.replace(/&#x3D;/g,+'=')
++++++.replace(/&#x60;/g,+'`');
}|5165118|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

For escape html specials (UTF-8)
<pre><code>function htmlEscape(str) {
 return str
 .replace(/&amp;/g, '&amp;amp;')
 .replace(/&quot;/g, '&amp;quot;')
 .replace(/'/g, '&amp;#39;')
 .replace(/&lt;/g, '&amp;lt;')
 .replace(/&gt;/g, '&amp;gt;')
 .replace(/\//g, '&amp;#x2F;')
 .replace(/=/g, '&amp;#x3D;')
 .replace(/`/g, '&amp;#x60;');
}
</code></pre>
For unescape html specials (UTF-8)
<pre><code>function htmlUnescape(str) {
 return str
 .replace(/&amp;amp;/g, '&amp;')
 .replace(/&amp;quot;/g, '&quot;')
 .replace(/&amp;#39;/g, &quot;'&quot;)
 .replace(/&amp;lt;/g, '&lt;')
 .replace(/&amp;gt;/g, '&gt;')
 .replace(/&amp;#x2F/g, '/')
 .replace(/&amp;#x3D;/g, '=')
 .replace(/&amp;#x60;/g, '`');
}
</code></pre>

blocks|key|5164207|text|This+answer提供了jQuery和普通的JS方法，但这是不使用DOM的最短方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|5164208|unescape(escape("It's+>+20%25+less+complicated+this+way."))|code-block|syntax|javascript|5164209|转义字符串：It%2527s%2520%253E%252020%2525%2520less%2520complicated%2520this%2520way.|style|CODE|5164210|如果转义的空格困扰您，请尝试：|5164211|unescape(escape("It's+>+20%25+less+complicated+this+way.").replace(/%2520/g,+"+"))|5164212|转义字符串：It%2527s+%253E+20%2525+less+complicated+this+way.|5164213|不幸的是，escape()函数是deprecated+in+JavaScript+version+1.5。encodeURI()或encodeURIComponent()是替代方案，但它们忽略了'，因此最后一行代码将变成这样：|5164214|decodeURI(encodeURI("It's+>+20%25+less+complicated+this+way.").replace(/%2520/g,+"+").replace("'",+'%2527'))|5164215|所有主流浏览器仍然支持短代码，考虑到旧网站的数量，我怀疑这种情况很快就会改变。|5164216|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/10825766/819417|1|http://www.w3schools.com/jsref/jsref_escape.asp^0|0|B|0|0|0|6|1J|0|0|0|6|17|0|5|8|1H|B|1T|K|2P|1|G|10|1|0|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@$A|19|B|1A|1|1B]]|C|$]]|$1|D|3|E|5|F|7|1C|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|1D|8|@$A|1E|B|1F|K|L]]|9|@]|C|$]]|$1|M|3|N|5|6|7|1G|8|@]|9|@]|C|$]]|$1|O|3|P|5|F|7|1H|8|@]|9|@]|C|$G|H]]|$1|Q|3|R|5|6|7|1I|8|@$A|1J|B|1K|K|L]]|9|@]|C|$]]|$1|S|3|T|5|6|7|1L|8|@$A|1M|B|1N|K|L]|$A|1O|B|1P|K|L]|$A|1Q|B|1R|K|L]|$A|1S|B|1T|K|L]]|9|@$A|1U|B|1V|1|1W]]|C|$]]|$1|U|3|V|5|F|7|1X|8|@]|9|@]|C|$G|H]]|$1|W|3|X|5|6|7|1Y|8|@]|9|@]|C|$]]|$1|Y|3|-4|5|6|7|1Z|8|@]|9|@]|C|$]]]|Z|$10|$5|11|12|13|C|$14|15]]|16|$5|11|12|13|C|$14|17]]]]

<a href="https://stackoverflow.com/a/10825766/819417">This answer</a> provides the jQuery and normal JS methods, but this is shortest without using the DOM:

<pre><code>unescape(escape("It's &gt; 20% less complicated this way."))
</code></pre>

Escaped string: <code>It%27s%20%3E%2020%25%20less%20complicated%20this%20way.</code>

If the escaped spaces bother you, try:

<pre><code>unescape(escape("It's &gt; 20% less complicated this way.").replace(/%20/g, " "))
</code></pre>

Escaped string: <code>It%27s %3E 20%25 less complicated this way.</code>

Unfortunately, the <code>escape()</code> function was <a href="http://www.w3schools.com/jsref/jsref_escape.asp" rel="nofollow noreferrer">deprecated in JavaScript version 1.5</a>. <code>encodeURI()</code> or <code>encodeURIComponent()</code> are alternatives, but they ignore <code>'</code>, so the last line of code would turn into this:

<pre><code>decodeURI(encodeURI("It's &gt; 20% less complicated this way.").replace(/%20/g, " ").replace("'", '%27'))
</code></pre>

All major browsers still support the short code, and given the number of old websites, i doubt that will change soon.

blocks|key|5164665|text|如果您将此信息保存在数据库中，那么使用客户端脚本转义HTML是错误的，这应该在服务器中完成。否则很容易绕过你的XSS保护。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|5164666|为了让我的观点更清晰，这里有一个使用其中一个答案的例子：|5164667|假设您正在使用函数escapeHtml从博客中的评论中转义Html，然后将其发布到服务器。|5164668|var+entityMap+=+{
++++"&":+"&amp;",
++++"<":+"&lt;",
++++">":+"&gt;",
++++'"':+'&quot;',
++++"'":+'&#39;',
++++"/":+'&#x2F;'
++};

++function+escapeHtml(string)+{
++++return+String(string).replace(/[&<>"'\/]/g,+function+(s)+{
++++++return+entityMap[s];
++++});
++}|code-block|syntax|javascript|5164669|用户可以：|5164670|使用浏览器控制台编辑POST请求参数并将注释替换为javascript+code.|5164671|Overwrite+|unordered-list-item|5164672|+escapeHtml函数。|5164673|5164674|5164675|如果用户将此代码片段粘贴到控制台中，则会绕过XSS验证：|5164676|function+escapeHtml(string){
+++return+string
}|5164677|entityMap^0|A|3|J|3|13|3|0|0|S|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@$9|16|A|17|B|C]|$9|18|A|19|B|C]|$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1C|8|@$9|1D|A|1E|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1F|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1G|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|1H|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1I|8|@]|D|@]|E|$]]|$1|S|3|T|5|U|7|1J|8|@]|D|@]|E|$]]|$1|V|3|W|5|U|7|1K|8|@]|D|@]|E|$]]|$1|X|3|-4|5|6|7|1L|8|@]|D|@]|E|$]]|$1|Y|3|-4|5|6|7|1M|8|@]|D|@]|E|$]]|$1|Z|3|10|5|6|7|1N|8|@]|D|@]|E|$]]|$1|11|3|12|5|L|7|1O|8|@]|D|@]|E|$M|N]]|$1|13|3|-4|5|6|7|1P|8|@]|D|@]|E|$]]]|14|$]]

If you are saving this information in a database, its wrong to escape HTML using a client-side script, this should be done in the server. Otherwise its easy to bypass your XSS protection.

To make my point clear, here is a exemple using one of the answers:

Lets say you are using the function escapeHtml to escape the Html from a comment in your blog and then posting it to your server.

<pre><code>var entityMap = {
 "&amp;": "&amp;amp;",
 "&lt;": "&amp;lt;",
 "&gt;": "&amp;gt;",
 '"': '&amp;quot;',
 "'": '&amp;#39;',
 "/": '&amp;#x2F;'
 };

 function escapeHtml(string) {
 return String(string).replace(/[&amp;&lt;&gt;"'\/]/g, function (s) {
 return entityMap[s];
 });
 }
</code></pre>

The user could:

<ul>
<li>Edit the POST request parameters and replace the comment with javascript code.</li>
<li>Overwrite the escapeHtml function using the browser console.</li>
</ul>

If the user paste this snippet in the console it would bypass the XSS validation:

<pre><code>function escapeHtml(string){
 return string
}
</code></pre>

blocks|key|712317|text|如果你不防止重新转义，那么所有的解决方案都是无用的，例如，大多数解决方案都会一直从&转义到&amp;。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|712318|escapeHtml+=+function+(s)+{
++++return+s+?+s.replace(
++++++++/[&<>'"]/g,
++++++++function+(c,+offset,+str)+{
++++++++++++if+(c+===+"&")+{
++++++++++++++++var+substr+=+str.substring(offset,+offset+%2B+6);
++++++++++++++++if+(/&(amp%7Clt%7Cgt%7Capos%7Cquot);/.test(substr))+{
++++++++++++++++++++//+already+escaped,+do+not+re-escape
++++++++++++++++++++return+c;
++++++++++++++++}
++++++++++++}
++++++++++++return+"&"+%2B+{
++++++++++++++++"&":+"amp",
++++++++++++++++"<":+"lt",
++++++++++++++++">":+"gt",
++++++++++++++++"'":+"apos",
++++++++++++++++'"':+"quot"
++++++++++++}[c]+%2B+";";
++++++++}
++++)+:+"";
};|code-block|syntax|javascript|712319|entityMap^0|15|1|19|5|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

All solutions are useless if you dont prevent re-escape, e.g. most solutions would keep escaping <code>&amp;</code> to <code>&amp;amp;</code>.

<pre><code>escapeHtml = function (s) {
 return s ? s.replace(
 /[&amp;&lt;&gt;'"]/g,
 function (c, offset, str) {
 if (c === "&amp;") {
 var substr = str.substring(offset, offset + 6);
 if (/&amp;(amp|lt|gt|apos|quot);/.test(substr)) {
 // already escaped, do not re-escape
 return c;
 }
 }
 return "&amp;" + {
 "&amp;": "amp",
 "&lt;": "lt",
 "&gt;": "gt",
 "'": "apos",
 '"': "quot"
 }[c] + ";";
 }
 ) : "";
};
</code></pre>

Does anyone know of an easy way to escape HTML from strings in <a href="http://jquery.com/" rel="noreferrer">jQuery</a>? I need to be able to pass an arbitrary string and have it properly escaped for display in an HTML page (preventing JavaScript/HTML injection attacks). I'm sure it's possible to extend jQuery to do this, but I don't know enough about the framework at the moment to accomplish this.

Escaping HTML strings with jQuery

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

有没有人知道用从字符串中转义HTML的简单方法？我需要能够传递任意字符串，并将其正确转义以便在HTML页面中显示(防止JavaScript/HTML注入攻击)。我确信有可能通过扩展jQuery来实现这一点，但目前我对框架的了解还不够多。

问使用jQuery转义HTML字符串
EN

回答 27

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery转义HTML字符串EN

回答 27

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery转义HTML字符串
EN