在 JavaScript 中编码 HTML 实体

Question

我在一个允许用户输入内容的 CMS 中工作。问题是当他们添加符号 ® 时，它可能无法在所有浏览器中很好地显示。我想设置一个必须搜索的符号列表，然后转换为相应的html实体。例如

® => ®
& => &
© => ©
™ => ™

转换后需要用<sup>标签包裹，结果是这样的：

® => <sup>®</sup>

因为需要特定的字体大小和填充样式：

sup { font-size: 0.6em; padding-top: 0.2em; }

JavaScript 会是这样的吗？

var regs = document.querySelectorAll('®');
  for ( var i = 0, l = imgs.length; i < l; ++i ) {
  var [?] = regs[i];
  var [?] = document.createElement('sup');
  img.parentNode.insertBefore([?]);
  div.appendChild([?]);
}

其中“[?]”表示我不确定的事情。

其他详情：

• 我想用纯 JavaScript 来做这件事，而不是 需要像 jQuery 这样的库，谢谢。
• 后端是 Ruby
• 使用使用 Ruby on Rails 构建的 RefineryCMS

Answer 1

您可以使用正则表达式将给定 unicode 范围内的任何字符替换为其等效的 html 实体。代码看起来像这样：

var encodedStr = rawStr.replace(/[\u00A0-\u9999<>\&]/g, function(i) {
   return '&#'+i.charCodeAt(0)+';';
});

这段代码会将给定范围内的所有字符（unicode 00A0 - 9999，以及与号、大于和小于）替换为它们的 html 实体等效项，即 &#nnn;，其中 nnn 是我们的 unicode 值从charCodeAt获取。

在此处查看实际操作：http://jsfiddle.net/E3EqX/13/（此示例使用 jQuery 作为示例中使用的元素选择器。上面的基本代码本身不使用 jQuery）

进行这些转换并不能解决所有问题 - 确保您使用的是 UTF8 字符编码，确保您的数据库以 UTF8 存储字符串。您仍然可能会看到字符无法正确显示的情况，具体取决于系统字体配置和您无法控制的其他问题。

文档

• String.charCodeAt - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt
• HTML 字符实体 - http://www.chucke.com/entities.html

Answer 2

The currently accepted answer 有几个问题。这篇文章解释了它们，并提供了一个更强大的解决方案。该答案中建议的解决方案以前有：

var encodedStr = rawStr.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
  return '&#' + i.charCodeAt(0) + ';';
});

i 标志是多余的，因为从 U+00A0 到 U+9999 范围内的任何 Unicode 符号都没有超出同一范围的大写/小写变体。

m 标志是多余的，因为在正则表达式中没有使用 ^ 或 $。

为什么范围是 U+00A0 到 U+9999？这似乎是任意的。

无论如何，对于正确编码 all 的解决方案，除了输入中的安全和可打印 ASCII 符号（包括星体符号！），并实现所有命名字符引用（不仅仅是 HTML4 中的那些），@ 987654322@（免责声明：这个库是我的）。从它的自述文件中：

he（用于“HTML 实体”）是用 JavaScript 编写的强大的 HTML 实体编码器/解码器。它支持all standardized named character references as per HTML，处理ambiguous ampersands 和其他极端情况just like a browser would，具有广泛的测试套件，并且——与许多其他JavaScript 解决方案相反——he 可以很好地处理星体Unicode 符号。 An online demo is available.

另见this relevant Stack Overflow answer。

Answer 3

我遇到了同样的问题并创建了 2 个函数来创建实体并将它们转换回普通字符。 以下方法将任何字符串转换为 HTML 实体并返回字符串原型

/**
 * Convert a string to HTML entities
 */
String.prototype.toHtmlEntities = function() {
    return this.replace(/./gm, function(s) {
        // return "&#" + s.charCodeAt(0) + ";";
        return (s.match(/[a-z0-9\s]+/i)) ? s : "&#" + s.charCodeAt(0) + ";";
    });
};

/**
 * Create string from HTML entities
 */
String.fromHtmlEntities = function(string) {
    return (string+"").replace(/&#\d+;/gm,function(s) {
        return String.fromCharCode(s.match(/\d+/gm)[0]);
    })
};

然后您可以按以下方式使用它：

var str = "Test´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æø𣨠ƒ™en tést".toHtmlEntities();
console.log("Entities:", str);
console.log("String:", String.fromHtmlEntities(str));

控制台输出：

Entities: Dit is e´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æø𣨠ƒ™en t£eést
String: Dit is e´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æø𣨠ƒ™en t£eést 

Answer 4

这是人们在谷歌上搜索如何编码 html 实体的答案，因为它并没有真正解决有关 ^{包装器和符号实体的问题。}

对于HTML标签实体（&、），没有任何库，如果你不需要支持IENode.textContent设置它的内容：

var str = "<this is not a tag>";
var p = document.createElement("p");
p.textContent = str;
var converted = p.innerHTML;

这里是一个例子：https://jsfiddle.net/1erdhehv/

Answer 5

你可以用这个。

var escapeChars = {
  '¢' : 'cent',
  '£' : 'pound',
  '¥' : 'yen',
  '€': 'euro',
  '©' :'copy',
  '®' : 'reg',
  '<' : 'lt',
  '>' : 'gt',
  '"' : 'quot',
  '&' : 'amp',
  '\'' : '#39'
};

var regexString = '[';
for(var key in escapeChars) {
  regexString += key;
}
regexString += ']';

var regex = new RegExp( regexString, 'g');

function escapeHTML(str) {
  return str.replace(regex, function(m) {
    return '&' + escapeChars[m] + ';';
  });
};

https://github.com/epeli/underscore.string/blob/master/escapeHTML.js

var htmlEntities = {
    nbsp: ' ',
    cent: '¢',
    pound: '£',
    yen: '¥',
    euro: '€',
    copy: '©',
    reg: '®',
    lt: '<',
    gt: '>',
    quot: '"',
    amp: '&',
    apos: '\''
};

function unescapeHTML(str) {
    return str.replace(/\&([^;]+);/g, function (entity, entityCode) {
        var match;

        if (entityCode in htmlEntities) {
            return htmlEntities[entityCode];
            /*eslint no-cond-assign: 0*/
        } else if (match = entityCode.match(/^#x([\da-fA-F]+)$/)) {
            return String.fromCharCode(parseInt(match[1], 16));
            /*eslint no-cond-assign: 0*/
        } else if (match = entityCode.match(/^#(\d+)$/)) {
            return String.fromCharCode(~~match[1]);
        } else {
            return entity;
        }
    });
};

Answer 6

如果您想避免多次编码 html 实体

function encodeHTML(str){
    return str.replace(/([\u00A0-\u9999<>&])(.|$)/g, function(full, char, next) {
      if(char !== '&' || next !== '#'){
        if(/[\u00A0-\u9999<>&]/.test(next))
          next = '&#' + next.charCodeAt(0) + ';';

        return '&#' + char.charCodeAt(0) + ';' + next;
      }

      return full;
    });
}

function decodeHTML(str){
    return str.replace(/&#([0-9]+);/g, function(full, int) {
        return String.fromCharCode(parseInt(int));
    });
}

# 示例

var text = "<a>Content &#169; <#>&<&#># </a>";

text = encodeHTML(text);
console.log("Encode 1 times: " + text);

// &#60;a&#62;Content &#169; &#60;#&#62;&#38;&#60;&#38;#&#62;# &#60;/a&#62;

text = encodeHTML(text);
console.log("Encode 2 times: " + text);

// &#60;a&#62;Content &#169; &#60;#&#62;&#38;&#60;&#38;#&#62;# &#60;/a&#62;

text = decodeHTML(text);
console.log("Decoded: " + text);

// <a>Content © <#>&<&#># </a>

Answer 7

编码或解码 HTML 实体的简单方法之一
只需使用一个参数调用函数...

解码 HTML 实体

function decodeHTMLEntities(text) {
  var textArea = document.createElement('textarea');
  textArea.innerHTML = text;
  return textArea.value;
}

解码 HTML 实体 (JQuery)

function decodeHTMLEntities(text) {
  return $("<textarea/>").html(text).text();
}

编码 HTML 实体

function encodeHTMLEntities(text) {
  var textArea = document.createElement('textarea');
  textArea.innerText = text;
  return textArea.innerHTML;
}

编码 HTML 实体 (JQuery)

function encodeHTMLEntities(text) {
  return $("<textarea/>").text(text).html();
}

Answer 8

如果你已经在使用 jQuery，试试html()。

$('<div>').text('<script>alert("gotcha!")</script>').html()
// "&lt;script&gt;alert("gotcha!")&lt;/script&gt;"

实例化内存中的文本节点，并在其上调用html()。

它很丑，它浪费了一点内存，我不知道它是否像 he 库那样彻底，但如果你已经在使用 jQuery，也许这对你来说是一个选择。

取自 Felix Geisendörfer 的博文 Encode HTML entities with jQuery。

Answer 9

HTML 特殊字符及其ESCAPE CODES

保留字符必须通过 HTML 转义：我们可以使用字符转义来仅使用 ASCII 字符来表示 HTML、XHTML 或 XML 中的任何 Unicode 字符 [例如：& - U+00026]。 Numeric character references [Ex: & 符号(&) - &] & Named character references [例如：&] 是 character escape used in markup 的类型。

---

Predefined Entities

    原始字符​​strong>     XML实体替换    XML数字替换  
                                  <                     <
                  >                                   >                    > kbd>
“ kbd> ” kbd> ＆＃34; kbd>
＆ kbd> ＆amp ; KBD> ＆＃38; KBD>
' KBD> ' KBD> ＆＃39; KBD>

为了在网页中以普通形式显示 HTML 标签，我们使用<pre>、<code> 标签，或者我们可以转义它们。通过用字符串"&" 替换任何出现的"&" 字符以及用字符串">" 替换任何出现的">" 字符来转义字符串。例如：stackoverflow post

function escapeCharEntities() {
    var map = {
        "&": "&",
        "<": "&lt;",
        ">": "&gt;",
        "\"": "&quot;",
        "'": "&apos;"
    };
    return map;
}

var mapkeys = '', mapvalues = '';
var html = {
    encodeRex : function () {
        return  new RegExp(mapkeys, 'g'); // "[&<>"']"
    }, 
    decodeRex : function () {
        return  new RegExp(mapvalues, 'g'); // "(&amp;|&lt;|&gt;|&quot;|&apos;)"
    },
    encodeMap : JSON.parse( JSON.stringify( escapeCharEntities () ) ), // json = {&: "&amp;", <: "&lt;", >: "&gt;", ": "&quot;", ': "&apos;"}
    decodeMap : JSON.parse( JSON.stringify( swapJsonKeyValues( escapeCharEntities () ) ) ),
    encode : function ( str ) {
        var encodeRexs = html.encodeRex();
        console.log('Encode Rex: ', encodeRexs); // /[&<>"']/gm
        return str.replace(encodeRexs, function(m) { console.log('Encode M: ', m); return html.encodeMap[m]; }); // m = < " > SpecialChars
    },
    decode : function ( str ) {
        var decodeRexs = html.decodeRex();
        console.log('Decode Rex: ', decodeRexs); // /(&amp;|&lt;|&gt;|&quot;|&apos;)/g
        return str.replace(decodeRexs, function(m) { console.log('Decode M: ', m); return html.decodeMap[m]; }); // m = &lt; &quot; &gt;
    }
};

function swapJsonKeyValues ( json ) {
    var count = Object.keys( json ).length;
    var obj = {};
    var keys = '[', val = '(', keysCount = 1;
    for(var key in json) {
        if ( json.hasOwnProperty( key ) ) {
            obj[ json[ key ] ] = key;
            keys += key;
            if( keysCount < count ) {
                val += json[ key ]+'|';
            } else {
                val += json[ key ];
            }
            keysCount++;
        }
    }
    keys += ']';    val  += ')';
    console.log( keys, ' == ', val);
    mapkeys = keys;
    mapvalues = val;
    return obj;
}

console.log('Encode: ', html.encode('<input type="password" name="password" value=""/>') ); 
console.log('Decode: ', html.decode(html.encode('<input type="password" name="password" value=""/>')) );

O/P:
Encode:  &lt;input type=&quot;password&quot; name=&quot;password&quot; value=&quot;&quot;/&gt;
Decode:  <input type="password" name="password" value=""/>

Answer 10

var htmlEntities = [
            {regex:/&/g,entity:'&'},
            {regex:/>/g,entity:'>'},
            {regex:/</g,entity:'&lt;'},
            {regex:/"/g,entity:'&quot;'},
            {regex:/á/g,entity:'&aacute;'},
            {regex:/é/g,entity:'&eacute;'},
            {regex:/í/g,entity:'&iacute;'},
            {regex:/ó/g,entity:'&oacute;'},
            {regex:/ú/g,entity:'&uacute;'}
        ];

total = <some string value>

for(v in htmlEntities){
    total = total.replace(htmlEntities[v].regex, htmlEntities[v].entity);
}

数组解

Answer 11

有时你只想对每个字符进行编码...这个函数替换了 regxp 中的“everything but nothing”。

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

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

test.value=encode(document.body.innerHTML.trim());

<textarea id=test rows=11 cols=55>www.WHAK.com</textarea>

Answer 12

这是我实现编码的方式。我从上面给出的答案中获得了灵感。

function encodeHTML(str) {
  const code = {
      ' ' : ' ',
      '¢' : '¢',
      '£' : '£',
      '¥' : '¥',
      '€' : '€', 
      '©' : '©',
      '®' : '®',
      '<' : '&lt;', 
      '>' : '&gt;',  
      '"' : '&quot;', 
      '&' : '&amp;',
      '\'' : '&apos;'
  };
  return str.replace(/[\u00A0-\u9999<>\&''""]/gm, (i)=>code[i]);
}

// TEST
console.log(encodeHTML("Dolce & Gabbana"));
console.log(encodeHTML("Hamburgers < Pizza < Tacos"));
console.log(encodeHTML("Sixty > twelve"));
console.log(encodeHTML('Stuff in "quotation marks"'));
console.log(encodeHTML("Schindler's List"));
console.log(encodeHTML("<>"));

Answer 13

查看 Ourcodeworld 中的教程 Ourcodeworld - encode and decode html entities with javascript

最重要的是，he library 示例

he.encode('foo © bar ≠ baz ???? qux');
// → 'foo © bar ≠ baz 𝌆 qux'

// Passing an `options` object to `encode`, to explicitly encode all symbols:
he.encode('foo © bar ≠ baz ???? qux', {
 'encodeEverything': true
});

he.decode('foo © bar ≠ baz 𝌆 qux');
// → 'foo © bar ≠ baz ???? qux'

这个库可能会使您的编码更容易和更好地管理。它很受欢迎，定期更新并遵循 HTML 规范。它本身没有依赖关系，可以在package.json中看到

Answer 14

htmlentities() 转换 HTML 实体

所以我们构建了一个常量来包含我们想要转换的 html 标签。

const htmlEntities = [ 
    {regex:'&',entity:'&'},
    {regex:'>',entity:'>'},
    {regex:'<',entity:'&lt;'} 
  ];

我们构建了一个函数，将所有相应的 html 字符转换为字符串：Html ==> String

 function htmlentities (s){
    var reg; 
    for (v in htmlEntities) {
      reg = new RegExp(htmlEntities[v].regex, 'g');
      s = s.replace(reg, htmlEntities[v].entity);
    }
    return s;
  }

为了解码，我们构建了一个反向函数，它将所有字符串转换为它们等效的 html 。字符串 ==> html

 function  html_entities_decode (s){
    var reg; 
    for (v in htmlEntities) {
      reg = new RegExp(htmlEntities[v].entity, 'g');
      s = s.replace(reg, htmlEntities[v].regex);
    }
    return s;
  
   }

之后，我们可以使用 encodeURIComponent() 对所有其他特殊字符（é è ...）进行编码

用例

 var s  = '<div> God bless you guy   </div> '
 var h = encodeURIComponent(htmlentities(s));         /** To encode */
 h =  html_entities_decode(decodeURIComponent(h));     /** To decode */

Answer 15

您可以使用charCodeAt()方法检查指定字符的值是否大于127，并使用toString(16)将其转换为数字字符引用。

Answer 16

replaceHtmlEntities(text) {
  var tagsToReplace = {
    '&': '&',
    '&lt;': '<',
    '&gt;': '>',
  };
  var newtext = text;
  for (var tag in tagsToReplace) {
    if (Reflect.apply({}.hasOwnProperty, this, [tagsToReplace, tag])) {
      var regex = new RegExp(tag, 'g');
      newtext = newtext.replace(regex, tagsToReplace[tag]);
    }
  }
  return newtext;
}

Answer 17

<!DOCTYPE html>
<html>
<style>
button {
backround: #ccc;
padding: 14px;
width: 400px;
font-size: 32px;
}
#demo {
font-size: 20px;
font-family: Arial;
font-weight: bold;
}
</style>
<body>

<p>Click the button to decode.</p>

<button onclick="entitycode()">Html Code</button>

<p id="demo"></p>


<script>
function entitycode() {
  var uri = "quotation  = ark __ &apos; = apostrophe  __ &amp; = ampersand __ &lt; = less-than __ &gt; = greater-than __ 	non- = reaking space __ &iexcl; = inverted exclamation mark __ &cent; = cent __ &pound; = pound __ &curren; = currency __ &yen; = yen __ &brvbar; = broken vertical bar __ &sect; = section __ &uml; = spacing diaeresis __ &copy; = copyright __ &ordf; = feminine ordinal indicator __ &laquo; = angle quotation mark (left) __ &not; = negation __ &shy; = soft hyphen __ &reg; = registered trademark __ &macr; = spacing macron __ &deg; = degree __ &plusmn; = plus-or-minus  __ &sup2; = superscript 2 __ &sup3; = superscript 3 __ &acute; = spacing acute __ &micro; = micro __ &para; = paragraph __ &middot; = middle dot __ &cedil; = spacing cedilla __ &sup1; = superscript 1 __ &ordm; = masculine ordinal indicator __ &raquo; = angle quotation mark (right) __ &frac14; = fraction 1/4 __ &frac12; = fraction 1/2 __ &frac34; = fraction 3/4 __ &iquest; = inverted question mark __ &times; = multiplication __ &divide; = division __ &Agrave; = capital a, grave accent __ &Aacute; = capital a, acute accent __ &Acirc; = capital a, circumflex accent __ &Atilde; = capital a, tilde __ &Auml; = capital a, umlaut mark __ &Aring; = capital a, ring __ &AElig; = capital ae __ &Ccedil; = capital c, cedilla __ &Egrave; = capital e, grave accent __ &Eacute; = capital e, acute accent __ &Ecirc; = capital e, circumflex accent __ &Euml; = capital e, umlaut mark __ &Igrave; = capital i, grave accent __ &Iacute; = capital i, acute accent __ &Icirc; = capital i, circumflex accent __ &Iuml; = capital i, umlaut mark __ &ETH; = capital eth, Icelandic __ &Ntilde; = capital n, tilde __ &Ograve; = capital o, grave accent __ &Oacute; = capital o, acute accent __ &Ocirc; = capital o, circumflex accent __ &Otilde; = capital o, tilde __ &Ouml; = capital o, umlaut mark __ &Oslash; = capital o, slash __ &Ugrave; = capital u, grave accent __ &Uacute; = capital u, acute accent __ &Ucirc; = capital u, circumflex accent __ &Uuml; = capital u, umlaut mark __ &Yacute; = capital y, acute accent __ &THORN; = capital THORN, Icelandic __ &szlig; = small sharp s, German __ &agrave; = small a, grave accent __ &aacute; = small a, acute accent __ &acirc; = small a, circumflex accent __ &atilde; = small a, tilde __ &auml; = small a, umlaut mark __ &aring; = small a, ring __ &aelig; = small ae __ &ccedil; = small c, cedilla __ &egrave; = small e, grave accent __ &eacute; = small e, acute accent __ &ecirc; = small e, circumflex accent __ &euml; = small e, umlaut mark __ &igrave; = small i, grave accent __ &iacute; = small i, acute accent __ &icirc; = small i, circumflex accent __ &iuml; = small i, umlaut mark __ &eth; = small eth, Icelandic __ &ntilde; = small n, tilde __ &ograve; = small o, grave accent __ &oacute; = small o, acute accent __ &ocirc; = small o, circumflex accent __ &otilde; = small o, tilde __ &ouml; = small o, umlaut mark __ &oslash; = small o, slash __ &ugrave; = small u, grave accent __ &uacute; = small u, acute accent __ &ucirc; = small u, circumflex accent __ &uuml; = small u, umlaut mark __ &yacute; = small y, acute accent __ &thorn; = small thorn, Icelandic __ &yuml; = small y, umlaut mark";
  var enc = encodeURI(uri);
  var dec = decodeURI(enc);
  var res = dec;
  document.getElementById("demo").innerHTML = res;
}
</script>

</body>
</html>

Answer 18

function htmlEntityReplacer(encoded_text) {
    var decoded_text = encoded_text;

    const all_entities = [{ /* source: https://www.w3schools.com/html/html_entities.asp */
        encoded: ` `,
        decoded: ` `
    }, {
        encoded: `<`,
        decoded: `<`
    }, {
        encoded: `&gt;`,
        decoded: `>`
    }, {
        encoded: `&amp;`,
        decoded: `&`
    }, {
        encoded: `&quot;`,
        decoded: `"`
    }, {
        encoded: `&apos;`,
        decoded: `'`
    }, {
        encoded: `&cent;`,
        decoded: `¢`
    }, {
        encoded: `&pound;`,
        decoded: `£`
    }, {
        encoded: `&yen;`,
        decoded: `yen`
    }, {
        encoded: `&euro;`,
        decoded: `€`
    }, {
        encoded: `&copy;`,
        decoded: `©`
    }, {
        encoded: `&reg;`,
        decoded: `®`
    }]
    for (i = 0; i < all_entities.length; i++) {
        var decoded_text = decoded_text.replace(new RegExp(all_entities[i].encoded, 'g'), all_entities[i].decoded)
    }
    return decoded_text;
}

// 对于节点或原版