我可以在JavaScript中转义html特殊字符吗？

Question

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

Answer 1

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

Answer 2

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='&lt;b&gt;cool&lt;/b&gt;'>

Answer 3

你可以使用jQuery的.text()功能.

例如:

http://jsfiddle.net/9H6Ch/

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

我们需要注意,此方法会根据需要转义提供的字符串,以便在HTML中正确呈现.为此,它调用DOM方法.createTextNode(),不将字符串解释为HTML.

jQuery文档的早期版本以这种方式表达了它(强调添加):

我们需要注意,此方法会根据需要转义提供的字符串,以便在HTML中正确呈现.为此,它调用DOM方法.createTextNode(),它将特殊字符替换为其HTML实体等价物(例如< for <).

Answer 4

我想我找到了正确的方法......

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

Answer 5

使用lodash

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

源代码

Answer 6

到目前为止,这是我见过它的最快方式.此外,它可以在不添加,删除或更改页面上的元素的情况下完成所有操作.

function escapeHTML(unsafeText) {
    let div = document.createElement('div');
    div.innerText = unsafeText;
    return div.innerHTML;
}

Answer 7

按书本

编辑 HTML 属性时，请使用推荐的“HTML 属性编码”：

OWASP 建议“除字母数字字符外，[您应该]使用格式&#xHH;（或命名实体，如果可用）对 ASCII 值小于 256 的所有字符进行转义，以防止切换出[an]属性。”

所以这里有一个函数可以做到这一点，并带有一个用法示例：

function escapeHTML(unsafe) {
  return unsafe.replace(
    /[\u0000-\u002F\u003A-\u0040\u005B-\u0060\u007B-\u00FF]/g,
    c => '&#' + ('000' + c.charCodeAt(0)).slice(-4) + ';'
  )
}

document.querySelector('div').innerHTML =
  '<span class=' +
  escapeHTML('"fakeclass" onclick="alert("test")') +
  '>' +
  escapeHTML('<script>alert("inspect the attributes")\u003C/script>') +
  '</span>'

<div></div>

您应该验证我提供的实体范围，以自行验证该功能的安全性。您还可以使用此正则表达式，它具有更好的可读性，并且应该涵盖相同的字符代码，但在我的浏览器中性能降低了约 10%：

/(?![0-9A-Za-z])[\u0000-\u00FF]/g

在 之间编辑 HTML 内容时<tags>，请使用“HTML Entity Encoding”：

为此，OWASP 建议您“查看 .textContent 属性，因为它是一个安全接收器，并且会自动进行 HTML 实体编码”。

Answer 8

找到更好的解决方案很有意思:

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

我不解析,>因为它不会破坏结果中的XML/HTML代码.

以下是基准:http://jsperf.com/regexpairs 此外,我创建了一个通用escape功能:http://jsperf.com/regexpairs2

Answer 9

显示未编码文本的最简洁，最高效的方法是使用textContentproperty。

比使用更快innerHTML。而且这还没有考虑到转义开销。

document.body.textContent = 'a <b> c </b>';

Answer 10

您可以对字符串中的每个字符进行编码：

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

或者只针对需要担心的主要角色 (&、inebreaks、<、>、" 和 ')，例如：

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

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,
*************/

Answer 11

DOM元素通过分配给innerText支持将文本转换为HTML 。innerText不是函数，但是对其进行分配就像将文本转义一样。

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