JavaScript零宽字符

时间:2020-03-24
本文章向大家介绍JavaScript零宽字符,主要包括JavaScript零宽字符使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

什么是零宽字符

一种不可打印的Unicode字符, 在浏览器等环境不可见, 但是真是存在, 获取字符串长度时也会占位置, 表示某一种控制功能的字符.

常见的零宽字符有哪些

零宽空格(zero-width space, ZWSP)用于可能需要换行处。
    Unicode: U+200B  HTML: ​
零宽不连字 (zero-width non-joiner,ZWNJ)放在电子文本的两个字符之间,抑制本来会发生的连字,而是以这两个字符原本的字形来绘制。
    Unicode: U+200C  HTML: ‌
零宽连字(zero-width joiner,ZWJ)是一个控制字符,放在某些需要复杂排版语言(如阿拉伯语、印地语)的两个字符之间,使得这两个本不会发生连字的字符产生了连字效果。
    Unicode: U+200D  HTML: ‍
左至右符号(Left-to-right mark,LRM)是一种控制字符,用于计算机的双向文稿排版中。
    Unicode: U+200E  HTML: ‎ ‎ 或‎
右至左符号(Right-to-left mark,RLM)是一种控制字符,用于计算机的双向文稿排版中。
    Unicode: U+200F  HTML: ‏ ‏ 或‏
字节顺序标记(byte-order mark,BOM)常被用来当做标示文件是以UTF-8、UTF-16或UTF-32编码的标记。
    Unicode: U+FEFF

零宽字符的用途

利用零宽字符在浏览器环境不显示,
可以将零宽字符插入文本中,干扰关键字匹配;
也可以将信息加密隐藏于文本中, 达到标记的效果.

信息加密解密的思路是, 把字符串转成二进制0和1, 并用空格把字符隔开, 然后用三种零宽表示0、1、空格, 然后用第四种零宽字符拼起来; 解密反向操作即可.

代码如下:

// str -> 零宽字符
function strToZeroWidth(str) {
  return str
    .split('')
    .map(char => char.charCodeAt(0).toString(2)) // 1 0 空格
    .join(' ')
    .split('')
    .map(binaryNum => {
      if (binaryNum === '1') {
        return '​'; // ​
      } else if (binaryNum === '0') {
        return '‌'; // ‌
      } else {
        return '‍'; // ‍
      }
    })
    .join('‎') // ‎
}

// 零宽字符 -> str
function zeroWidthToStr(zeroWidthStr) {
  return zeroWidthStr
    .split('‎') // ‎
    .map(char => {
      if (char === '​') { // ​
        return '1';
      } else if (char === '‌') { // ‌
        return '0';
      } else { // ‍
        return ' ';
      }
    })
    .join('')
    .split(' ')
    .map(binaryNum => String.fromCharCode(parseInt(binaryNum, 2)))
    .join('')
}

使用:

过滤零宽字符

excel表格 中经常出现零宽字符 \u202c \u202d, 上传后解析或复制到 input 就会有问题,

例如复制 "‭176xxxx1115‬" 到控制台获取 length 是 13 而不是 11, 实际字符串首尾都被 excel 添加了零宽字符 "\u202d176xxxx1115\u202c".

所以在 excel表格 中获取到的数据一般需要先过滤.

str.replace(/[\u200b-\u200f\uFEFF\u202a-\u202e]/g, "");

提取零宽字符

如果用 零宽字符 加密信息后插入了文本中, 解密时需要先吧 零宽字符 提取出来.

str.replace(/[^\u200b-\u200f\uFEFF\u202a-\u202e]/g, "");

whosmeya.

原文地址:https://www.cnblogs.com/whosMeya/p/12557554.html