JS实现HTML实体与字符的相互转换（一）

最近在用Node.js获取网页时发现返回的网页中有一些实体字符，比如中文应该是“用户名”，结果返回的是用户名，读起来相当不爽，于是网上查询能将html实体字符转化为相应字符的方法，找了一些感觉不对症（不知道我是不是没找对地方）。不多幸好知道了实体字符也是相应Unicode字符的再包装，于是自己写了js代码来完成二者之间的相互转换。

不过还是要澄清一下，本文主要讲述的转换不适用于所有的命名实体，如 、&等，而仅仅是针对实体编号（包括10进制和16进制编码）的，比如“中国”被编码为中国的情况。如果让您失望了，在此我深表遗憾。不过，我的另一篇文章JS实现HTML实体与字符的相互转换（二）将主要讲述命名实体同字符的转换，如<与<的相互转换，希望能解决您的问题吧。

在讲实体字符与相应字符之前的转换前，首先再来复习一遍charCodeAt和formCharCode两个函数。前者是所有字符串共有的方法（定义在String.prototype中），它接收一个参数，可返回指定位置字符的 Unicode 编码，这个返回值是 0 - 65535 之间的整数；后者是String的静态方法，可接受一个或多个指定的 Unicode 值，然后返回一个字符串。好了，知道这两个函数就能完成Unicode值与字符的相互转换了。还是来看代码：

//字符串转字符实体
function stringToEntity(str,radix){let arr=[]//返回的字符实体默认10进制，也可以选择16进制radix=radix||0for(let i=0;i<str.length;i++){                               arr.push((!radix?'&#'+str.charCodeAt(i):'&#x'+str.charCodeAt(i).toString(16))+';')}let tmp=arr.join('')console.log(`'${str}' 转实体为 '${tmp}'`)return tmp
}

这里没什么好讲的，就是用charCodeAt函数把字符串的Unicode码返回再加上实体符号的前缀后缀，拼接就好了。

//字符实体转字符串
function entityToString(entity){let entities=entity.split(';')entities.pop()let tmp=''for(let i=0;i<entities.length;i++){let num=entities[i].trim().slice(2)if(num[0]==='x')//10进制还是16进制num=parseInt(num.slice(1),16);else num=parseInt(num);tmp+=String.fromCharCode(num)}console.log(`'${entity}' 转字符串为 '${tmp}'`)return tmp
}

这个也好理解，提取出给定实体的Unicode字符码，用String.fromCharCode转换为给定的字符就好了。关键把位置找好。

这里用到了一些ES6的语法，比如let和模版字符串(就是写在反引号里面的东西了，减轻了我们拼接字符串的负担)语法。还有后面的箭头函数都是很好的东西，但有时也会踩坑呀。整体思想还是挺简单的，就是字符转Unicode码然后按相应格式拼接就可以了。

然后测试一下效果，嗯，效果还是不错的

let _str=entityToString('用户名¢')
entityToString(stringToEntity(_str))
entityToString(stringToEntity(_str,1))
console.log('')
_str=entityToString('ΑΒΚ')
entityToString(stringToEntity(_str))
entityToString(stringToEntity(_str,1))
/******* the result *******
'用户名¢' 转字符串为 '用户名¢'
'用户名¢' 转实体为 '用户名¢'
'用户名¢' 转字符串为 '用户名¢'
i'用户名¢' 转实体为 '用户名¢'
'用户名¢' 转字符串为 '用户名¢''ΑΒΚ' 转字符串为 'ΑΒΚ'
'ΑΒΚ' 转实体为 'ΑΒΚ'
'ΑΒΚ' 转字符串为 'ΑΒΚ'
'ΑΒΚ' 转实体为 'ΑΒΚ'
'ΑΒΚ' 转字符串为 'ΑΒΚ'
**************************/

什么，代码有点low，那好吧，这样呢？这样就简洁多了。

function stringToEntity(str,radix){let arr=str.split('')radix=radix||0let tmp=arr.map(item=>
`&#${(radix?'x'+item.charCodeAt(0).toString(16):item.charCodeAt(0))};`).join('')console.log(`'${str}' 转实体为 '${tmp}'`)return tmp
}
function entityToString(entity){let entities=entity.split(';')entities.pop()let tmp=entities.map(item=>String.fromCharCode(item[2]==='x'?parseInt(item.slice(3),16):parseInt(item.slice(2)))).join('')console.log(`'${entity}' 转字符串为 '${tmp}'`)return tmp
}

下面给一个HTML实体对照表：
HTML特殊符号对照表、常用的字符实体

JS实现HTML实体与字符的相互转换（一）相关推荐

js 转化为实体符_js转html实体的方法
方法一: 用的浏览器内部转换器实现转换,方法是动态创建一个容器标签元素,如DIV,将要转换的字符串设置为这个元素的innerText,然后返回这个元素的innerHTML,即得到经过HTML编码转换的 ...
day01【HTML基础】HTML表单【重点】、表单控件、水平线标签、段落和换行标签、超链接标签、图像标签、列表标签、div和span标签、转义（实体）字符、基本表格、合并表格
HTML 一 HTML概述超文本标记语言(Hyper Text Markup Language) 作用:搭建基础网页超文本:具有普通文本的特性,同时还可以加入图片.视频.超链接等等. 标记:即标签 ...
JS删除String里某个字符的方法
关于JS删除String里的字符的方法,一般使用replace()方法.但是这个方法只会删除一次,如果需要将string里的所以字符都删除就要用到正则. 1 2 3 4 var str = " ...
js中时间戳与日期格式的相互转换
下面总结一下js中时间戳与日期格式的相互转换: 1. 将时间戳转换成日期格式: 1 2 3 4 5 6 7 8 9 10 11 12 function timestampToTime(timestam ...
php的实体字符表,php htmlspecialchars_decode() 函数把预定义的 HTML 实体转换为字符
定义和用法 htmlspecialchars_decode() 函数把预定义的 HTML 实体转换为字符. 会被解码的 HTML 实体是: & 解码成 & (和号) " 解码 ...
js html转为实体,字符串js编码转换成实体html编码的方法（防范XSS攻击）
js代码在html页面中转换成实体html编码的方法一: js代码转换成实体html js代码转换成实体html--红 function test(){ alert('测试红') } test(); ...
php html字符转换为字符串,PHP字符串函数html_entity_decode( 把HTML实体转换为字符)
在PHP中,字符串函数 html_entity_decode() 用于把HTML实体转换为字符. 函数语法:html_entity_decode ( string $string [, int $fl ...
echarts国内各省份地图js/json文件，全球地图js文件/汉化，字符云js文件
echarts国内各省份地图js/json文件,全球地图js文件/汉化,字符云js文件下载链接世界地图中国地图国内各省份地图字符云下载链接 https://github.com/FuHan ...
js替换字符串某个字符，js修改字符串中指定字符
平时用到elementui时,经常遇到多级树形结构,但是后端往往给前端反的每一级字段不一致,如果写个遍历循环将其改为一致麻烦的,不如直接将后台发的数组转为字符串,再将字符串中不一致的字段替换成一致的即 ...

JS实现HTML实体与字符的相互转换（一）

JS实现HTML实体与字符的相互转换（一）相关推荐

最新文章

热门文章