在javascript中编码html实体

Question

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

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

转换后,需要将其包装在<sup>标记中,从而产生以下结果:

® => <sup>&reg;</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<>\&]/gim, function(i) {
   return '&#'+i.charCodeAt(0)+';';
});

与HTML表示,这简直就是-这个代码将取代在给定范围内的所有字符(9999,以及符号,大于和小于的unicode 00A0) &#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

目前接受的答案有几个问题.这篇文章解释了它们,并提供了更强大的解决方案.该答案中建议的解决方案是:

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

该i标志是冗余的,因为在U + 00A0到U + 9999范围内的Unicode符号没有大于/小写的变量,该变量在同一范围之外.

该m标志是冗余的,因为^或未$在正则表达式中使用.

为什么范围U + 00A0到U + 9999？这似乎是武断的.

无论如何,对于正确编码输入中除安全和可打印ASCII符号之外的所有解决方案(包括星体符号!),并实现所有命名字符引用(不仅仅是HTML4中的那些)的解决方案,请使用he库(免责声明:此库是我的).从其自述文件:

他(对于"HTML实体")是一个用JavaScript编写的健壮的HTML实体编码器/解码器.它支持所有标准化的命名字符引用,根据HTML,处理模糊的&符号和其他边缘情况,就像浏览器一样,具有广泛的测试套件,并且 - 与许多其他JavaScript解决方案相反 - 他处理星体Unicode符号就好了.提供在线演示.

另请参阅此相关的Stack Overflow答案.

Answer 3

编码或解码 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 4

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

/**
 * Convert a string to HTML entities
 */
String.prototype.toHtmlEntities = function() {
    return this.replace(/./gm, function(s) {
        return "&#" + 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 5

没有任何库,如果您不需要支持IE <9,您可以创建一个html元素并使用Node.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 6

你可以用它.

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 7

HTML 特殊字符及其ESCAPE CODES

\n

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

\n\n

预定义实体

\n

\n

\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0Original Character\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0XML entity replacement\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0XML numeric replacement\xc2\xa0\xc2\xa0
\n \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0<\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0&lt;\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0&#60;\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0
\n \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0>\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0&gt;\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0&#62;\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0
\n \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0"\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0&quot; \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0&#34;\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0
\n \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0&\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0&amp;\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0&#38;\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0
\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\'\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0&apos;\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0&#39;\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0

\n

\n

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

\n

function escapeCharEntities() {\n    var map = {\n        "&": "&amp;",\n        "<": "&lt;",\n        ">": "&gt;",\n        "\\"": "&quot;",\n        "\'": "&apos;"\n    };\n    return map;\n}\n\nvar mapkeys = \'\', mapvalues = \'\';\nvar html = {\n    encodeRex : function () {\n        return  new RegExp(mapkeys, \'g\'); // "[&<>"\']"\n    }, \n    decodeRex : function () {\n        return  new RegExp(mapvalues, \'g\'); // "(&amp;|&lt;|&gt;|&quot;|&apos;)"\n    },\n    encodeMap : JSON.parse( JSON.stringify( escapeCharEntities () ) ), // json = {&: "&amp;", <: "&lt;", >: "&gt;", ": "&quot;", \': "&apos;"}\n    decodeMap : JSON.parse( JSON.stringify( swapJsonKeyValues( escapeCharEntities () ) ) ),\n    encode : function ( str ) {\n        var encodeRexs = html.encodeRex();\n        console.log(\'Encode Rex: \', encodeRexs); // /[&<>"\']/gm\n        return str.replace(encodeRexs, function(m) { console.log(\'Encode M: \', m); return html.encodeMap[m]; }); // m = < " > SpecialChars\n    },\n    decode : function ( str ) {\n        var decodeRexs = html.decodeRex();\n        console.log(\'Decode Rex: \', decodeRexs); // /(&amp;|&lt;|&gt;|&quot;|&apos;)/g\n        return str.replace(decodeRexs, function(m) { console.log(\'Decode M: \', m); return html.decodeMap[m]; }); // m = &lt; &quot; &gt;\n    }\n};\n\nfunction swapJsonKeyValues ( json ) {\n    var count = Object.keys( json ).length;\n    var obj = {};\n    var keys = \'[\', val = \'(\', keysCount = 1;\n    for(var key in json) {\n        if ( json.hasOwnProperty( key ) ) {\n            obj[ json[ key ] ] = key;\n            keys += key;\n            if( keysCount < count ) {\n                val += json[ key ]+\'|\';\n            } else {\n                val += json[ key ];\n            }\n            keysCount++;\n        }\n    }\n    keys += \']\';    val  += \')\';\n    console.log( keys, \' == \', val);\n    mapkeys = keys;\n    mapvalues = val;\n    return obj;\n}\n\nconsole.log(\'Encode: \', html.encode(\'<input type="password" name="password" value=""/>\') ); \nconsole.log(\'Decode: \', html.decode(html.encode(\'<input type="password" name="password" value=""/>\')) );\n\nO/P:\nEncode:  &lt;input type=&quot;password&quot; name=&quot;password&quot; value=&quot;&quot;/&gt;\nDecode:  <input type="password" name="password" value=""/>\n

\n

Answer 8

如果要避免多次对html实体进行编码

function encodeHTML(str){
    return str.replace(/[\u00A0-\u9999<>&](?!#)/gim, function(i) {
      return '&#' + i.charCodeAt(0) + ';';
    });
}

function decodeHTML(str){
    return str.replace(/&#([0-9]{1,3});/gi, function(match, num) {
        return String.fromCharCode(parseInt(num));
    });
}

例

var text = "<a>Content</a>";

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

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

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

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

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

// <a>Content</a>

Answer 9

如果您已经在使用 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 entity with jQuery。

Answer 10

var htmlEntities = [\n            {regex:/&/g,entity:\'&amp;\'},\n            {regex:/>/g,entity:\'&gt;\'},\n            {regex:/</g,entity:\'&lt;\'},\n            {regex:/"/g,entity:\'&quot;\'},\n            {regex:/\xc3\xa1/g,entity:\'&aacute;\'},\n            {regex:/\xc3\xa9/g,entity:\'&eacute;\'},\n            {regex:/\xc3\xad/g,entity:\'&iacute;\'},\n            {regex:/\xc3\xb3/g,entity:\'&oacute;\'},\n            {regex:/\xc3\xba/g,entity:\'&uacute;\'}\n        ];\n\ntotal = <some string value>\n\nfor(v in htmlEntities){\n    total = total.replace(htmlEntities[v].regex, htmlEntities[v].entity);\n}\n

\n\n

数组解决方案

\n