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

Question

我想通过 JavaScript 函数将文本显示为 HTML。如何在 JavaScript 中转义 HTML 特殊字符？有 API 吗？

Answer 1

这是一个几乎适用于所有网络浏览器的解决方案：

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

如果您只支持现代网络浏览器（2020+），那么您可以使用新的replaceAll 功能：

const escapeHtml = (unsafe) => {
    return unsafe.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll("'", '&#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='<b>cool</b>'>

Answer 3

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

例如：

http://jsfiddle.net/9H6Ch/

来自关于 .text() 函数的 jQuery 文档：

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

以前版本的 jQuery 文档是这样写的（强调）：

我们需要注意，此方法会根据需要对提供的字符串进行转义，以便在 HTML 中正确呈现。为此，它调用 DOM 方法 .createTextNode()，将特殊字符替换为其 HTML 实体等效项（例如 &amplt; 表示

Answer 4

使用Lodash:

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

Source code

Answer 5

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

// 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 6

到目前为止，这是我见过的最快的方法。此外，它无需添加、删除或更改页面上的元素即可完成所有操作。

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

Answer 7

找到更好的解决方案很有趣：

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 8

显示未编码文本的最简洁和高效的方法是使用textContent 属性。

Faster 比使用 innerHTML。这还没有考虑转义开销。

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

Answer 9

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

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

Answer 10

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

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">www.WHAK.com</textarea>

Answer 11

如果您已经在应用程序中使用模块，则可以使用escape-html 模块。

import escapeHtml from 'escape-html';
const unsafeString = '<script>alert("XSS");</script>';
const safeString = escapeHtml(unsafeString);

Answer 12

书本

OWASP recommends 表示“[e]除了字母数字字符，[您应该] 使用&#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

Answer 13

我在构建 DOM 结构时遇到了这个问题。这个问题帮我解决了。我想使用双 V 形作为路径分隔符，但添加一个新的文本节点直接导致显示转义字符代码，而不是字符本身：

var _div = document.createElement('div');
var _separator = document.createTextNode('»');
//_div.appendChild(_separator); /* This resulted in '»' being displayed */
_div.innerHTML = _separator.textContent; /* This was key */

Answer 14

只需在<pre><code class="html-escape">....</code></pre> 之间编写代码即可。确保在代码标签中添加类名。它将转义所有用
<pre><code class="html-escape">....</code></pre>.

编写的 HTML sn-p

const escape = {
    '"': '"',
    '&': '&',
    '<': '&lt;',
    '>': '&gt;',
}
const codeWrappers = document.querySelectorAll('.html-escape')
if (codeWrappers.length > 0) {
    codeWrappers.forEach(code => {
        const htmlCode = code.innerHTML
        const escapeString = htmlCode.replace(/"|&|<|>/g, function (matched) {
            return escape[matched];
        });
        code.innerHTML = escapeString
    })
}

<pre>
    <code class="language-html html-escape">
        <div class="card">
            <div class="card-header-img" style="background-image: url('/assets/card-sample.png');"></div>
            <div class="card-body">
                <p class="card-title">Card Title</p>
                <p class="card-subtitle">Srcondary text</p>
                <p class="card-text">Greyhound divisively hello coldly wonderfully marginally far upon
                    excluding.</p>
                <button class="btn">Go to </button>
                <button class="btn btn-outline">Go to </button>
            </div>
        </div>
    </code>
</pre>

Answer 15

使用它从 JavaScript 中的字符串中删除 HTML 标记：

const strippedString = htmlString.replace(/(<([^>]+)>)/gi, "");

console.log(strippedString);

Answer 16

试试这个，使用 prototype.js 库：

string.escapeHTML();

Try a demo

Answer 17

我想出了这个解决方案。

假设我们要向元素中添加一些 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 标记（我希望如此）。