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
複製代碼

測試：<Hello> "World"

結果：<Hello> "World"

結語

這麼認真的註釋給個贊再走唄！

哦~哈哈哈~