阅读 156

JS 转义&反转义 HTML标签、特殊字符

简单好用才是硬道理啊!

业务需要,网上捞了很多过滤HTML标签和特殊字符的贴子,各有千秋吧!

最后自己整理了一个优雅版。

  • 思路:正则匹配并用 replace 函数替换。
  • 优化:划分结构,让资源可配置。
// 抽离成可配置的匹配列表
const matchList  = {
  '&lt;': '<',
  '&gt;': '>',
  '&amp;': '&',
  '&#34;': '"',
  '&quot;': '"',
  '&#39;': "'",
}
// 字符过滤器
const HtmlFilter = (text) => {
  let regStr = '(' + Object.keys(matchList).toString() + ')'
  // ↑ ------------【*提取匹配列表key值*】.【组数转字符串】      
  regStr = regStr.replace(/,/g, ')|(')
  // ↑ 通过匹配将其更新为正则的字符串类型
  const regExp = new RegExp(regStr, 'g')
  // ↑ ------- 字符串 转 正则 方法
  return text.replace(regExp, match => matchList[match])
  // ↑ ------ 替换方法 (正则, 当前key => 返回当前被匹配的key值)
}

export default HtmlFilter
复制代码

测试:&lt;Hello&gt; &#34;World&#34;

结果:<Hello> "World"

结语

这么认真的注释给个赞再走呗!

哦~哈哈哈~

关注下面的标签,发现更多相似文章
评论