我想通过javascript函数向HTML显示文本。如何在JS中转义html特殊字符？有API吗？
答案 0 :(得分：249)
function escapeHtml(unsafe) {
return unsafe
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
答案 1 :(得分：44)
您可以使用jQuery的.text() function。
例如：
关于.text()函数的jQuery文档：
我们需要注意这个方法 转义提供的字符串 必要的，以便它将呈现 在HTML中正确。为此，它打电话 DOM方法.createTextNode（）， 不会将字符串解释为HTML。
jQuery文档的早期版本以这种方式措辞（强调添加）：
我们需要注意，此方法会根据需要转义提供的字符串，以便在HTML中正确呈现。为此，它调用DOM方法.createTextNode（），将特殊字符替换为其HTML实体等价物（例如＆amp; lt; for＆lt;）。
答案 2 :(得分：41)
function escapeHtml(html){
var text = document.createTextNode(html);
var p = document.createElement('p');
p.appendChild(text);
return p.innerHTML;
}
// Escape while typing & print result
document.querySelector('input').addEventListener('input', e => {
console.clear();
console.log( escapeHtml(e.target.value) );
});<input style='width:90%; padding:6px;' placeholder='<b>cool</b>'>
答案 3 :(得分：23)
我想我找到了正确的方法......
// Create a DOM Text node:
var text_node = document.createTextNode(unescaped_text);
// Get the HTML element where you want to insert the text into:
var elem = document.getElementById('msg_span');
// Optional: clear its old contents
//elem.innerHTML = '';
// Append the text node into it:
elem.appendChild(text_node);
答案 4 :(得分：19)
答案 5 :(得分：11)
到目前为止，这是我见过它的最快方式。此外，它可以在不添加，删除或更改页面上的元素的情况下完成所有操作。
function escapeHTML(unsafeText) {
let div = document.createElement('div');
div.innerText = unsafeText;
return div.innerHTML;
}
答案 6 :(得分：11)
找到更好的解决方案很有意思：
var escapeHTML = function(unsafe) {
return unsafe.replace(/[&<"']/g, function(m) {
switch (m) {
case '&':
return '&';
case '<':
return '<';
case '"':
return '"';
default:
return ''';
}
});
};
我不解析>因为它不会破坏结果中的XML / HTML代码。
以下是基准：http://jsperf.com/regexpairs
另外，我创建了一个通用的escape函数：http://jsperf.com/regexpairs2
答案 7 :(得分：4)
DOM Elements支持通过分配 innerText 将文本转换为HTML。 innerText不是一个函数，但分配给它就好像文本被转义一样。
document.querySelectorAll('#id')[0].innerText = 'unsafe " String >><>';
答案 8 :(得分：3)
显示未编码文本的最简洁，最高效的方法是使用textContent属性。
Faster比使用innerHTML。而且没有考虑到逃避开销。
document.body.textContent = 'a <b> c </b>';
答案 9 :(得分：2)
您可以对字符串中的每个字符进行编码：
function encode(e){return e.replace(/[^]/g,function(e){return"&#"+e.charCodeAt(0)+";"})}
或者只是针对主角担心（＆amp;，inebreaks，＆lt;，＆gt;，“和'），如：
function encode(r){
return r.replace(/[\x26\x0A\<>'"]/g,function(r){return"&#"+r.charCodeAt(0)+";"})
}
test.value=encode('How to encode\nonly html tags &<>\'" nice & fast!');
/*************
* \x26 is &ersand (it has to be first),
* \x0A is newline,
*************/<textarea id=test rows="9" cols="55">www.WHAK.com</textarea>
答案 10 :(得分：1)
使用此操作从JavaScript中的字符串中删除HTML标签：
const strippedString = htmlString.replace(/(<([^>]+)>)/gi, "");
console.log(strippedString);
答案 11 :(得分：1)
OWASP recommends 表示“[e] 除了字母数字字符，[您应该] 使用 &#xHH; 格式（或命名实体，如果可用）转义所有 ASCII 值小于 256 的字符，以防止切换超出 [an] 属性。”
这里有一个函数可以做到这一点，并附上一个用法示例：
function escapeHTML(unsafe) {
return unsafe.replace(
/[\u0000-\u002F\u003A-\u0040\u005B-\u0060\u007B-\u00FF]/g,
c => '&#' + ('000' + c.charCodeAt(0)).substr(-4, 4) + ';'
)
}
document.querySelector('div').innerHTML =
'<span class=' +
escapeHTML('this should break it! " | / % * + , - / ; < = > ^') +
'>' +
escapeHTML('<script>alert("inspect the attributes")\u003C/script>') +
'</span>'<div></div>您应该验证我提供的实体范围，以自己验证函数的安全性。您也可以使用此正则表达式，它具有更好的可读性并且应该涵盖相同的字符代码，但在我的浏览器中的性能降低了大约 10%：
/(?![0-9A-Za-z])[\u0000-\u00FF]/g
答案 12 :(得分：0)
在构建DOM结构时遇到此问题。这个问题帮助我解决了。我想使用双V形作为路径分隔符，但是附加一个新的文本节点直接导致显示转义的字符代码，而不是字符本身：
var _div = document.createElement('div');
var _separator = document.createTextNode('»');
//_div.appendChild(_separator); /* this resulted in '»' being displayed */
_div.innerHTML = _separator.textContent; /* this was key */
答案 13 :(得分：0)
单线（适用于ES6 +）：
var escapeHtml = s => (s + '').replace(/[&<>"']/g, m => ({
'&': '&', '<': '<', '>': '>',
'"': '"', "'": '''
})[m]);
对于旧版本：
function escapeHtml(s) {
return (s + '').replace(/[&<>"']/g, function (m) {
return ({
'&': '&', '<': '<', '>': '>',
'"': '"', "'": '''
})[m];
});
}
答案 14 :(得分：0)
如果您已在应用中使用模块，则可以使用escape-html模块。
import escapeHtml from 'escape-html';
const unsafeString = '<script>alert("XSS");</script>';
const safeString = escapeHtml(unsafeString);
答案 15 :(得分：0)
只需在 <pre><code class="html-escape">....</code></pre> 之间编写代码。确保在代码标记中添加类名。它将转义所有写在
中的 HTML 片段
<pre><code class="html-escape">....</code></pre>。
const escape = {
'"': '"',
'&': '&',
'<': '<',
'>': '>',
}
const codeWrappers = document.querySelectorAll('.html-escape')
if (codeWrappers.length > 0) {
codeWrappers.forEach(code => {
const htmlCode = code.innerHTML
const escapeString = htmlCode.replace(/"|&|<|>/g, function (matched) {
return escape[matched];
});
code.innerHTML = escapeString
})
}<pre>
<code class="language-html html-escape">
<div class="card">
<div class="card-header-img" style="background-image: url('/assets/card-sample.png');"></div>
<div class="card-body">
<p class="card-title">Card Title</p>
<p class="card-subtitle">Srcondary text</p>
<p class="card-text">Greyhound divisively hello coldly wonderfully marginally far upon
excluding.</p>
<button class="btn">Go to </button>
<button class="btn btn-outline">Go to </button>
</div>
</div>
</code>
</pre>答案 16 :(得分：-2)
我提出了这个解决方案。
假设我们想要使用来自用户或数据库的不安全数据向元素添加一些html。
var unsafe = 'some unsafe data like <script>alert("oops");</script> here';
var html = '';
html += '<div>';
html += '<p>' + unsafe + '</p>';
html += '</div>';
element.html(html);
对XSS攻击不安全。现在加上这个。
$(document.createElement('div')).html(unsafe).text();
所以它是
var unsafe = 'some unsafe data like <script>alert("oops");</script> here';
var html = '';
html += '<div>';
html += '<p>' + $(document.createElement('div')).html(unsafe).text(); + '</p>';
html += '</div>';
element.html(html);
对我而言，这比使用.replace()要容易得多，而且它会删除!!!所有可能的html标签（我希望）。
答案 17 :(得分：-2)
答案 18 :(得分：-2)
完整的jQuery解决方案：
function escapeHtml(unsafe) {
return $('<i>').text(unsafe).html();
}
如果我们转义了不安全的字符串"<br>"，则会得到"<br>"