用 JavaScript 编码 HTML 实体

您可以使用正则表达式将给定 unicode 范围内的任何字符替换为与其对应的 html 实体。代码如下所示:

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

这段代码将用它们的 html 实体等价物替换给定范围内的所有字符(unicode 00A0-9999，以及 & 符号，大于 & 小于) ，这个实体等价物就是简单的 &#nnn;，其中 nnn是我们从 charCodeAt获得的 unicode 值。

在这里可以看到它的作用: 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

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

目前公认的答案 有几个问题。这篇文章解释了它们，并提供了一个更健壮的解决方案。该答复中提出的解决办法是:

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

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

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

为什么 U + 00 A0到 U + 9999的范围这么大? 看起来有点武断。

无论如何，对于一个解决方案，正确编码 所有除了安全和可打印的 ASCII 符号在输入(包括星体符号!)，并实现所有命名的字符引用(不仅仅是 HTML4中的引用) ，使用(免责声明: 此库是我的)。自述:

He (用于“ HTML 实体”)是一个用 JavaScript 编写的健壮的 HTML 实体编码器/解码器。它支持 所有标准化的命名字符引用，处理 不明确的 & 符号和其他边缘情况 就像浏览器一样，有一个广泛的测试套件，而且ーー与许多其他 JavaScript 解决方案不同的是ーー 他可以很好地处理星形 Unicode 符号。一个在线演示是可用的。

也请参阅 这个相关的堆栈溢出答案。

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

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

如果您已经在使用 jQuery，请尝试使用 html()。

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

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

它很难看，浪费了一点内存，我不知道它是否像 he库那样全面，但是如果您已经在使用 jQuery，也许这是一个适合您的选项。

摘自 Felix Geisendörfer 的博客文章 用 jQuery 编码 HTML 实体。

对于那些在谷歌上搜索如何编码 html 实体的人来说，这是一个答案，因为它并没有真正解决关于 < sup > 包装器和符号实体的问题。

对于 HTML 标记实体(& 、 < 和 >) ，不需要任何库，如果不需要支持 IE < 9，可以创建一个 HTML 元素并用 TextContent设置其内容:

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

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

有时候你只是想编码每个字符... 这个函数代替了 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>

你可以用这个。

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

HTML 特殊字符及其 ESCAPE CODES

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

预定义实体

    Original Character     XML entity replacement    XML numeric replacement  
                  <                                    &lt;                                           &#60;                    
                  >                                     &gt;                                         &#62;                    
                  "                                     &quot;                                      &#34;                    
                  &                                   &amp;                                       &#38;                    
                   '                                    &apos;                                      &#39;                     < br/>

为了在网页中显示 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=""/>

如果希望多次避免对 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>

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

数组解决方案

看看来自 Ourcodeworld 的教程 Ourcodeworld-用 javascript 对 html 实体进行编码和解码

最重要的是 图书馆示例

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 规范。它本身没有依赖关系，可以在 包裹 Json中看到

下面是我如何实现编码的。我从上面给出的答案中获得了灵感。

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("<>"));

对 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();
}

HTML 实体() 转换 HTML 实体

因此，我们构建一个常量，它将包含我们想要转换的 html 标记。

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

我们构建一个函数，将所有相应的 Html 字符转换为 String: 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 */

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;
}

//用于节点或香草

我想在这里分享我的解决方案给其他偶然发现这个帖子的读者。

我故意在这里转义引号，以便编码的值是“属性安全的”。<和 >也被有意地编码以便安全地避开任何 HTML 标记。

这是通过在 RegExp 上使用 u标志来实现的，该标志将匹配任何完整的 Unicode字符。我也使用 CodePointAt而不是 CharCodeAt，这样我就可以生成任何完整的 Unicode字符。然后，我确保任何匹配的字符都不是一组特定的 ASCII 字符，最后，对找到的每个 Unicode字符进行编码。

这也“忽略”任何当前转义的字符序列，通过匹配第一个字符序列。

function encodeHTMLEntities(str) {
if (!str)
return str;


// First:
//   Match any currently encoded characters first
//   (i.e. `C`, `C`, or '&')
//   Finally, match on any character with `.`, using
//   the `u` RegExp flag to match full Unicode code points.
// Second:
//   1) Already encoded characters must be at least four
//      characters (i.e. ``), and must start with an
//      '&' character. If this is true, then the match
//      is an already encoded character sequence, so just
//      return it.
//   2) Otherwise, see if the character is a single UTF-16
//      character, and is in our whitelist of allowed
//      characters (common ASCII, without quotes or < or >).
//      If this is the case, then don't encode the character,
//      and simply return it.
//   3) Finally, use codePointAt to encode the Unicode character.
return str.replace(/&#[0-9]+;|&#x[0-9a-fA-F]+;|&[0-9a-zA-Z]{2,};|./gu, (m) => {
// #1, is this an already encoded character sequence?
// If so, just return it.
if (m.length >= 4 && m[0] === '&')
return m;


// #2, is this one of our whitelisted ASCII characters
// (not including quotes or < or >)
if (m.length === 1 && m.match(/[a-zA-Z0-9\s\t\n\r~`!@#$%^&*_+=(){}[\]/\\,?:;|.-]/))
return m;


// #3 Otherwise, encode it as unicode
return `&#${m.codePointAt(0)};`;
});
}

例如:

console.log(encodeHTMLEntities('&amp; 😊 🙂 🎁 testing 🤣 &#x43; <stuff> "things" wow! &#67;'))

产出:

& 😊 🙂 🎁 testing 🤣 C <stuff> "things" wow! C

在 NodeJs 上安装 html-entities

然后:

import {encode} from "html-entities";
encode(str);