如何在javascript中转义一些html？

Question

鉴于文字

<b>This is some text</b>

我想把它写到我的页面,以便它显示如下:

<b>This is some text</b>

而不是这样

这是一些文字

使用escape("<b>This is some text</b>")在firefox中给我这个可爱的宝石

%3Cb%3EThis%20is%20some%20text%3C/b%3E

不是我所追求的.有任何想法吗？

Answer 1

这应该对你有用:http://blog.nickburwell.com/2011/02/escape-html-tags-in-javascript.html

function escapeHTML( string )
{
    var pre = document.createElement('pre');
    var text = document.createTextNode( string );
    pre.appendChild(text);
    return pre.innerHTML;
}

安全警告

该函数不会转义单引号和双引号,如果在错误的上下文中使用,可能仍然会导致XSS.例如:

 var userWebsite = '" onmouseover="alert(\'gotcha\')" "';
 var profileLink = '<a href="' + escapeHtml(userWebsite) + '">Bob</a>';
 var div = document.getElemenetById('target');
 div.innerHtml = profileLink;
 // <a href="" onmouseover="alert('gotcha')" "">Bob</a>

感谢缓冲区指出这种情况.从这篇博文中摘取的片段.

Answer 2

我最终这样做了:

function escapeHTML(s) { 
    return s.replace(/&/g, '&')
            .replace(/"/g, '"')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
}

Answer 3

对于HTML DOM文档可用的情况,我喜欢@limc的答案.

我喜欢@Michele Bosi和@Paolo对非HTML DOM文档环境(如Node.js)的回答.

@Michael Bosi的答案可以通过单次调用替换和巧妙的替换函数来消除调用替换4次的需要进行优化:

function escape(s) {
    let lookup = {
        '&': "&",
        '"': """,
        '<': "&lt;",
        '>': "&gt;"
    };
    return s.replace( /[&"<>]/g, (c) => lookup[c] );
}
console.log(escape("<b>This is some text.</b>"));

@ Paolo的范围测试可以通过精心选择的正则表达式进行优化,并且可以通过使用替换函数来消除for循环:

function escape(s) {
    return s.replace(
        /[^0-9A-Za-z ]/g,
        c => "&#" + c.charCodeAt(0) + ";"
    );
}
console.log(escape("<b>This is some text</b>"));

正如@Paolo所指出的,这种策略适用于更多场景.

Answer 4

试试这个htmlentities for javascript

function htmlEntities(str) {
    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}