个性化阅读
专注于IT技术分析

使用纯JavaScript编码和解码HTML实体

本文概述

无效的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;"

要将已编码的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节中描述的算法对其中的所有命名和数字字符引用进行解码。

he.decode('foo &copy; bar &ne; baz &#x1D306; qux');
// → 'foo © bar ≠ baz ???? qux'

玩得开心

赞(0)
未经允许不得转载:srcmini » 使用纯JavaScript编码和解码HTML实体

评论 抢沙发

评论前必须登录!