我可以在javascript中转义html特殊字符吗?
我想通过javascript函数向HTML显示文本。 如何在JS中转义html特殊字符? 有没有API?
function escapeHtml(unsafe) { return unsafe .replace(/&/g, "&") .replace(/</g, "<") .replace(/>/g, ">") .replace(/"/g, """) .replace(/'/g, "'"); }
你可以使用jQuery的.text()
函数 。
例如:
从关于.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, & pebbles'
有趣的是find解决scheme:
var escapeHTML = function(unsafe) { return unsafe.replace(/[&<"']/g, function(m) { switch (m) { case '&': return '&'; case '<': return '<'; case '"': return '"'; default: return '''; } }); };
我从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 &ersand (it has to be first), * \x0A is newline, *************/
<textarea id=test rows="9" cols="55">www.WHAK.com</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