本文概述
无效的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
"Hello, this is a test stríng > < with characters that could break html. Therefore we convert it to its html characters."
要将已编码的html字符串转换为可读字符, 请使用解码方法:
htmlentities.decode("Hello, this is a test stríng > < with characters that could break html. Therefore we convert it to its html characters.");
// 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 © bar ≠ baz 𝌆 qux'
// Passing an `options` object to `encode`, to explicitly encode all symbols:
he.encode('foo © bar ≠ baz ???? qux', {
'encodeEverything': true
});
// → 'foo © bar ≠ baz 𝌆 qux'
// This setting can be combined with the `useNamedReferences` option:
he.encode('foo © bar ≠ baz ???? qux', {
'encodeEverything': true, 'useNamedReferences': true
});
// → 'foo © bar ≠ baz 𝌆 qux'
解码
此函数采用HTML字符串, 并使用HTML规范的12.2.4.69节中描述的算法对其中的所有命名和数字字符引用进行解码。
he.decode('foo © bar ≠ baz 𝌆 qux');
// → 'foo © bar ≠ baz ???? qux'
玩得开心
评论前必须登录!
注册