Question

给出文字

<b>This is some text</b>

我想将它写入我的页面，以便它显示如下：

This is some text

而不喜欢这个

这是一些文字

使用escape("This is some text")在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>

感谢buffer指出这种情况。摘录自this blog post。

Answer 2

我最终这样做了：

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

Answer 3

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

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

@Michael Bosi的答案可以通过一次调用替换和巧妙的替换函数来取消调用替换4次的优化：

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

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

function escape(s) {
    return s.replace(/[^0-9A-Za-z ]/g, function(c) {
        return "&#" + 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;');
}

Answer 5

这是一个用尖括号替换html实体的函数。您可能希望将其展开以包含其他字符。

function htmlEntities( html ) {
    html = html.replace( /[<>]/g, function( match ) {
        if( match === '<' ) return '&lt;';
        else return '&gt;';
    });
    return html;
}

console.log( htmlEntities( '<b>replaced</b>' ) ); // &lt;b&gt;replaced&lt;/b&gt;

Answer 6

传统转义

如果您正在使用XHTML，则需要使用CDATA部分。你也可以在HTML中使用它们，但HTML并不严格。

我将字符串常量拆分，以便此代码在CDATA块内的XHTML上内联工作。如果您将JavaScript作为单独的文件来源，那么您不需要为此烦恼。请注意，如果您使用带有内联JavaScript的XHTML，那么您需要将您的代码封装在CDATA块中，否则其中一些代码将无效。你会遇到奇怪的，微妙的错误。

function htmlentities(text) {
    var escaped = text.replace(/\]\]>/g, ']]' + '>]]&gt;<' + '![CDATA[');
    return '<' + '![CDATA[' + escaped + ']]' + '>';
}

DOM文本节点

＆＃34;适当＆＃34;转义文本的方法是使用DOM函数document.createTextNode。这实际上并没有逃避文本;它只是告诉浏览器创建一个本质上未解析的文本元素。但是，您必须愿意使用DOM来使用此方法：即，您使用appendChild等方法，而不是innerHTML属性等。这将填充带有文本的ID an-element的元素，该元素不会被解析为（X）HTML：

var textNode = document.createTextNode("<strong>This won't be bold.  The tags " +
    "will be visible.</strong>");
document.getElementById('an-element').appendChild(textNode);

jQuery DOM Wrapper

jQuery为名为createTextNode的{{1}}提供了一个方便的包装器。这很方便。这里使用jQuery的功能相同：

text

Answer 7

您可以对字符串中的所有字符进行编码：

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

或者只是针对主角担心（＆amp;，inebreaks，＆lt;，＆gt;，＆＃34;和＆＃39;），如：

＆＃13;

function encode(r){
return r.replace(/[\x26\x0A\<>'"]/g,function(r){return"&#"+r.charCodeAt(0)+";"})
}

test.value=encode('Encode HTML entities!\n\n"Safe" escape <script id=\'\'> & useful in <pre> tags!');

testing.innerHTML=test.value;

/*************
* \x26 is &ampersand (it has to be first),
* \x0A is newline,
*************/

＆＃13;

<textarea id=test rows="9" cols="55"></textarea>

<div id="testing">www.WHAK.com</div>

＆＃13;

Answer 8

我使用以下函数，使用＆amp;＃ nnn ; 表示法转义每个字符，但 az AZ 0-9 和空间

function Escape( s )
{
    var h,
        i,
        n,
        c;

    n = s.length;
    h = '';

    for( i = 0; i < n; i++ )
    {
        c = s.charCodeAt( i );
        if( ( c >= 48 && c <= 57 ) 
          ||( c >= 65 && c <= 90 ) 
          ||( c >= 97 && c <=122 )
          ||( c == 32 ) )
        {
            h += String.fromCharCode( c );
        }
        else
        {
            h += '&#' + c + ';';
        }
    }

    return h;
}

示例：

Escape('This is some text')

返回

This is some text

该函数是代码注入攻击证明，unicode证明，纯JavaScript。

这种方法比创建DOM文本节点的方法<强>慢大约50倍但是功能在100-150毫秒内仍然会丢失一个百万（1,000,000）个字符串。

（2011年初测试MacBook Pro - Safari 9 - Mavericks）

如何在javascript中转义一些html？

8 个答案:

传统转义

DOM文本节点

jQuery DOM Wrapper