我可以在javascript中转义html特殊字符吗?

我想通过javascript函数向HTML显示文本。 如何在JS中转义html特殊字符? 有没有API?

function escapeHtml(unsafe) { return unsafe .replace(/&/g, "&amp;") .replace(/</g, "&lt;") .replace(/>/g, "&gt;") .replace(/"/g, "&quot;") .replace(/'/g, "&#039;"); } 

你可以使用jQuery的.text()函数 。

例如:

http://jsfiddle.net/9H6Ch/

从关于.text()函数的jQuery文档:

我们需要注意的是,这个方法会根据需要转义string,以便在HTML中正确呈现。 为此,它调用DOM方法.createTextNode(),不会将该string解释为HTML。

jQuery文档的以前的版本以这种方式expression了这个意思(着重点 ):

我们需要注意的是,这个方法会根据需要转义string,以便在HTML中正确呈现。 为此,它调用DOM方法.createTextNode(), 它用它们的HTML实体等价物 (如<for <) replace特殊字符

 function escapeHtml(html) { var text = document.createTextNode(html); var div = document.createElement('div'); div.appendChild(text); return div.innerHTML; } 

我想我find了正确的方法来做到这一点…

 // 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); 

使用lodash

 _.escape('fred, barney, & pebbles'); // => 'fred, barney, &amp; pebbles' 

有趣的是find解决scheme:

 var escapeHTML = function(unsafe) { return unsafe.replace(/[&<"']/g, function(m) { switch (m) { case '&': return '&amp;'; case '<': return '&lt;'; case '"': return '&quot;'; default: return '&#039;'; } }); }; 

我从parsing中移除>因为它不会中断XML / HTML代码。

这里是banchmarks: http ://jsperf.com/regexpairs另外,我创build通用的escape函数: http ://jsperf.com/regexpairs2

DOM元素支持通过分配给innerText将文本转换为HTML。 innerText不是一个函数,而是赋值给它,就像文本被转义一样。

 document.querySelectorAll('#id')[0].innerText = 'unsafe " String >><>'; 

您可以编码string中的每个字符:

 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)+";"}) } test.value=encode('How to encode\nonly html tags &<>\'" nice & fast!'); /************* * \x26 is &ampersand (it has to be first), * \x0A is newline, *************/ 
 <textarea id=test rows="9" cols="55">&#119;&#119;&#119;&#46;&#87;&#72;&#65;&#75;&#46;&#99;&#111;&#109;</textarea> 

试试这个,使用prototype.js库:

 string.escapeHTML(); 

尝试演示

我想出了这个解决scheme。

让我们假设我们要添加一些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标签(我希望)。

我不太确定这是不是你的意思,但是你可以像这样在一个stringvariables中转义html字符:

 var string = escape("escaped lessthan looks like this <"); 

设置string== escaped%20lessthan%20looks%20like%20this%20%3C