零宽空格 U+200B 引发的问题及扩展

配图源自 Freepik

背景

是这样的,最近在写一个微信公众号的处理脚本,用来替换替换文章中的指定内容。

function getInsertElement(rootElement) {
  const matchFlag = 'AA'
  const pList = [...rootElement.querySelectorAll('p')]
  let matchedElement = pList.find(el => {
    const text = (el.textContent || el.innerText).replace(/\u00a0/gi, '').trim()
    return text === matchFlag
  })
  return matchedElement
}

上面的方法是脚本的一部分,用于获取文章中指定字符串所在的 DOM 元素,思路是通过 Node.textContent 来匹配的。

在调试的时候,发现有时候匹配不上,用「肉眼」看是没问题的,但硬是匹配不上。经过一番排查之后,发现了一个有趣的事情,如图:

在编辑器内有字符 AA,然后使用 encodeURIComponent($0.textContent) 的编码结果是 AA%E2%80%8B,所以上面 text === matchFlag 比较结果为 false,自然就匹配不上了。下面将其转换为 Unicode 字符:

function string2Unicode(str) {
  return str
    .split('')
    .map(value => {
      const temp = value.charCodeAt(0).toString(16).padStart(4, '0').toUpperCase()
      if (temp.length > 2) return '\\u' + temp
      return value
    })
    .join('')
}

const encodedStr = '%E2%80%8B'
const originString = decodeURIComponent(encodedStr)
const unicodeStr = string2Unicode(originString)
console.log(unicodeStr) // \u200B

转换得出 %E2%80%8B 的 Unicode 编码为 U+200B,然后查询这里发现它是「零宽空格」,是一种不可见的字符。

因此,只要使用正则表达式 /\u200b/gi,把所有零宽空格干掉就行了。

function getInsertElement(rootElement) {
  const matchFlag = 'AA'
  const pList = [...rootElement.querySelectorAll('p')]
  let matchedElement = pList.find(el => {
    const text = (el.textContent || el.innerText)
      .replace(/\u00a0/gi, '')
      .replace(/\u200b/gi, '')
      .trim()
    return text === matchFlag
  })
  return matchedElement
}

零宽空格

零宽空格(zero-width space,ZWSP)是一种不可见、不可打印的 Unicode 字符,用于可能需要换行处。

在 Unicode 中,该字元为 U+200B。在 HTML 中转义字符有:。一般情况下,它是不可见的,但一些软件对这些不可见字符做了处理,视觉上可感知。举个例子:

相邻单词之间有一个零宽空格

LoremIpsumDolorSitAmetConsecteturAdipiscingElitSedDoEiusmodTemporIncididuntUtLaboreEtDoloreMagnaAliquaUtEnimAdMinimVeniamQuisNostrudExercitationUllamcoLaborisNisiUtAliquipExEaCommodoConsequatDuisAuteIrureDolorInReprehenderitInVoluptateVelitEsseCillumDoloreEuFugiatNullaPariaturExcepteurSintOccaecatCupidatatNonProidentSuntInCulpaQuiOfficiaDeseruntMollitAnimIdEstLaborum

相邻单词之间无零宽空格

LoremIpsumDolorSitAmetConsecteturAdipiscingElitSedDoEiusmodTemporIncididuntUtLaboreEtDoloreMagnaAliquaUtEnimAdMinimVeniamQuisNostrudExercitationUllamcoLaborisNisiUtAliquipExEaCommodoConsequatDuisAuteIrureDolorInReprehenderitInVoluptateVelitEsseCillumDoloreEuFugiatNullaPariaturExcepteurSintOccaecatCupidatatNonProidentSuntInCulpaQuiOfficiaDeseruntMollitAnimIdEstLaborum

它们在 VS Code 及页面中的展示效果,如图所示:

扩展

除此之外,还有零宽连字、零宽不连字也是不可见字符。

  • 零宽连字(zero-width joiner,ZWJ)是一个控制字符,放在某些需要复杂排版语言(如阿拉伯语、印地语)的两个字符之间,使得这两个本不会发生连字的字符产生了连字效果。其 Unicode 编码为 U+200D,HTML 转义字符有:&zwj

  • 零宽不连字(zero-width non-joiner,ZWNJ)是一个不打印字符,放在电子文本的两个字符之间,抑制本来会发生的连字,而是以这两个字符原本的字形来绘制。其 Unicode 编码为U+200C,HTML 转义字符为:

相信你也看过网友「把幸福的一家几口强行分开」的段子,哈哈:

我们利用前面的 string2Unicode() 方法,将其转化为 Unicode 编码,如下:

其实它们是由多个字符组合而成的,前面所看到的“空字符串”其实就是 U+200D(零宽连字)。

一篇有趣的文章:Why […‘❤️’] returns [‘’, ‘’, ‘❤’, ‘️’, ‘’, ‘’, ‘’, ‘’] in JavaScript?

应用

零宽字符能做什么?

  • 传递信息:利用其不可见的特性,在未对零宽字符做过滤的网站插入不可见的隐形文本。
  • 水印:同样利用其不可见的特性,给我们的产品添加隐形水印。
  • ...

The end.

你可能感兴趣的:(零宽空格 U+200B 引发的问题及扩展)