使用纯JavaScript编码和解码HTML实体 _JavaScript开发

本文概述

编码和解码所有内容
使用图书馆

无效的html, 损坏的标记以及使用html字符串而无法在Javascript中正确转义的其他不良副作用, 是每5个Web开发人员(使用动态应用程序)中至少有1个面临的问题。
Javascript本身不提供处理它的本机方法, 与PHP(我们漂亮的服务器端语言)不同, PHP提供了可供使用的htmlentities, html_entity_decode和html_entity_encode函数。
编码和解码所有内容如果你是那些不喜欢在项目中添加大量代码的精神病患者(就像我一样)的开发人员之一, 则可能需要使用以下代码段。
这段代码在编码和解码这两种方式上都像魅力一样。它期望将字符串(根据方法解码或编码)作为第一个参数, 并返回处理后的字符串。
它没有提供过多的自定义功能, 但效果很好(只有两行就更少了)。请注意, encode方法会将每个单个字符转换为其html字符。
如果你只想替换那些破坏了html的怪异字符(< , > , /, \等), 请继续阅读, 不要使用此方法, 否则此代码段将派上用场。

(function(window){ window.htmlentities = {/*** Converts a string to its html characters completely.** @param {String} str String with unescaped HTML characters**/encode : function(str) {var buf = []; for (var i=str.length-1; i> =0; i--) {buf.unshift(['& #', str[i].charCodeAt(), '; '].join('')); }return buf.join(''); }, /*** Converts an html characterSet into its original character.** @param {String} str htmlSet entities**/decode : function(str) {return str.replace(/& #(\d+); /g, function(match, dec) {return String.fromCharCode(dec); }); } }; })(window);

前面的代码在窗口中创建一个名为htmlentities的全局变量。该对象包含2种编码和解码方法。
要将普通字符串转换为其html字符, 请使用encode方法：

htmlentities.encode("Hello, this is a test stríng > < with characters that could break html. Therefore we convert it to its html characters."); // Output"& #72; & #101; & #108; & #108; & #111; & #44; & #32; & #116; & #104; & #105; & #115; & #32; & #105; & #115; & #32; & #97; & #32; & #116; & #101; & #115; & #116; & #32; & #115; & #116; & #114; & #237; & #110; & #103; & #32; & #62; & #32; & #60; & #32; & #119; & #105; & #116; & #104; & #32; & #99; & #104; & #97; & #114; & #97; & #99; & #116; & #101; & #114; & #115; & #32; & #116; & #104; & #97; & #116; & #32; & #99; & #111; & #117; & #108; & #100; & #32; & #98; & #114; & #101; & #97; & #107; & #32; & #104; & #116; & #109; & #108; & #46; & #32; & #84; & #104; & #101; & #114; & #101; & #102; & #111; & #114; & #101; & #32; & #119; & #101; & #32; & #99; & #111; & #110; & #118; & #101; & #114; & #116; & #32; & #105; & #116; & #32; & #116; & #111; & #32; & #105; & #116; & #115; & #32; & #104; & #116; & #109; & #108; & #32; & #99; & #104; & #97; & #114; & #97; & #99; & #116; & #101; & #114; & #115; & #46; "

【使用纯JavaScript编码和解码HTML实体】要将已编码的html字符串转换为可读字符, 请使用解码方法：

htmlentities.decode("& #72; & #101; & #108; & #108; & #111; & #44; & #32; & #116; & #104; & #105; & #115; & #32; & #105; & #115; & #32; & #97; & #32; & #116; & #101; & #115; & #116; & #32; & #115; & #116; & #114; & #237; & #110; & #103; & #32; & #62; & #32; & #60; & #32; & #119; & #105; & #116; & #104; & #32; & #99; & #104; & #97; & #114; & #97; & #99; & #116; & #101; & #114; & #115; & #32; & #116; & #104; & #97; & #116; & #32; & #99; & #111; & #117; & #108; & #100; & #32; & #98; & #114; & #101; & #97; & #107; & #32; & #104; & #116; & #109; & #108; & #46; & #32; & #84; & #104; & #101; & #114; & #101; & #102; & #111; & #114; & #101; & #32; & #119; & #101; & #32; & #99; & #111; & #110; & #118; & #101; & #114; & #116; & #32; & #105; & #116; & #32; & #116; & #111; & #32; & #105; & #116; & #115; & #32; & #104; & #116; & #109; & #108; & #32; & #99; & #104; & #97; & #114; & #97; & #99; & #116; & #101; & #114; & #115; & #46; "); // Output"Hello, this is a test stríng > < with characters that could break html. Therefore we convert it to its html characters."

注意：随时复制每个功能, 并根据需要将其包含在项目中。
使用图书馆作为一项不容易实现的任务, 有一个很棒的库可以为你解决此问题。
He.js(用于” HTML实体” )是使用JavaScript编写的健壮的HTML实体编码器/解码器。它支持HTML格式的所有标准化命名字符引用, 就像浏览器一样处理歧义的” ＆” 号和其他边缘情况, 具有广泛的测试套件, 并且与许多其他JavaScript解决方案相反, 他可以很好地处理星形Unicode符号。提供在线演示。
编码
此函数采用文本字符串, 并(默认情况下)编码所有无法打印的ASCII符号以及＆, < , > , “ , “ 和” , 并将它们替换为字符引用。

// Using the global default setting (defaults to `false`):he.encode('foo ? bar ≠ baz ???? qux'); // → 'foo & #xA9; bar & #x2260; baz & #x1D306; qux'// Passing an `options` object to `encode`, to explicitly encode all symbols:he.encode('foo ? bar ≠ baz ???? qux', { 'encodeEverything': true}); // → '& #x66; & #x6F; & #x6F; & #x20; & #xA9; & #x20; & #x62; & #x61; & #x72; & #x20; & #x2260; & #x20; & #x62; & #x61; & #x7A; & #x20; & #x1D306; & #x20; & #x71; & #x75; & #x78; '// This setting can be combined with the `useNamedReferences` option:he.encode('foo ? bar ≠ baz ???? qux', { 'encodeEverything': true, 'useNamedReferences': true}); // → '& #x66; & #x6F; & #x6F; & #x20; & copy; & #x20; & #x62; & #x61; & #x72; & #x20; & ne; & #x20; & #x62; & #x61; & #x7A; & #x20; & #x1D306; & #x20; & #x71; & #x75; & #x78; '

解码
此函数采用HTML字符串, 并使用HTML规范的12.2.4.69节中描述的算法对其中的所有命名和数字字符引用进行解码。