零宽字符应用场景及前端解决方案

零宽字符（Zero Width Characters）是一类在文本中不可见但具有特定功能的特殊字符。称为零宽字符，也叫幽灵字符。它们在显示时不占据任何空间，但在文本处理和显示中发挥着重要作用。这些字符主要包括零宽度空格、零宽度非连接符、零宽度连接符和零宽度无断行空格等。以下是对零宽字符的详细解析：

Unicode – The World Standard for Text and Emojihttps://home.unicode.org/

一、零宽字符的特点

• 不可见性：零宽字符在大多数程序或编辑器中是不可见的，它们不占据任何显示空间。
• 功能性：尽管不可见，但零宽字符在文本处理、排版、隐写术和程序开发中扮演着重要角色。
• Unicode编码：零宽字符是Unicode字符集中的一部分，每个字符都有对应的Unicode码位。

二、常见的零宽字符及其用途

1. 零宽度空格（Zero-Width Space, ZWSP）- Unicode码位：U+200B- 用途：用于较长单词的换行分隔，防止在不应该换行的地方发生换行。
2. 零宽度非断空格符（Zero Width No-Break Space, ZWNBSP）- Unicode码位：U+FEFF（注意：U+FEFF通常作为字节顺序标记，但在某些上下文中也用作非断空格符）- 用途：用于阻止特定位置的换行分隔，确保文本在特定位置不断行。
3. 零宽度连接符（Zero-Width Joiner, ZWJ）- Unicode码位：U+200D- 用途：在某些需要复杂排版语言（如阿拉伯语、印地语）中，使两个本不会发生连字的字符产生连字效果。
4. 零宽度非连接符（Zero-Width Non-Joiner, ZWNJ）- Unicode码位：U+200C- 用途：用于阿拉伯文、德文、印度语系等文字中，阻止会发生连字的字符间的连字效果，保持字符的独立形态。
5. 左至右符（Left-to-Right Mark, LRM）- Unicode码位：U+200E- 用途：在混合文字方向的多种语言文本中，规定排版文字书写方向为左至右。
6. 右至左符（Right-to-Left Mark, RLM）- Unicode码位：U+200F- 用途：在混合文字方向的多种语言文本中，规定排版文字书写方向为右至左。

三、零宽字符的应用场景

1. 数据防爬：将零宽度字符插入文本中，可以干扰爬虫的关键字匹配，从而保护数据不被轻易爬取。
2. 信息传递：通过自定义组合的零宽度字符，可以在用户复制文本时携带不可见信息，实现信息的隐蔽传递。
3. 隐形水印：利用零宽度字符的不可见性，可以在文件中添加隐形水印，用于追踪文件的分享者。
4. 加密信息分享：零宽度字符可用于加密敏感信息，通过特定的浏览器插件进行解密，实现隐蔽的信息分享。
5. 逃脱敏感词过滤：在需要避免敏感词过滤的场景中，可以使用零宽度字符来绕过过滤机制，保持信息的原意。

综上所述，零宽字符虽然不可见，但在文本处理、排版、隐写术和程序开发中具有广泛的应用价值。理解和正确使用这些字符，可以帮助解决一些复杂的文本处理和显示问题。

四、实验

1、vs code中的现象

2、浏览器中的现象

3、在记事本中的现象

选择 “显示 Unicode 控制字符”，也可以‭看到这类特殊符号

五、前端解决方案

在 Vue 中，直接通过指令（directive）来处理字符串，比如过滤掉零宽字符和首尾空格，并不是一个典型的用法，因为指令主要用于操作 DOM 或添加响应式行为，而不是处理数据本身。不过，你可以通过结合使用计算属性（computed properties）或方法（methods）来预处理数据，然后在模板中展示处理后的数据。

方法一：使用计算属性

在你的 Vue 组件中，可以使用计算属性来过滤字符串。计算属性基于它们的响应式依赖进行缓存。只有在相关响应式依赖发生改变时它们才会重新求值。

<template>  
  <div>{{ filteredText }}</div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      rawText: " \u200B Hello, world! \u200B ", // \u200B 是零宽空格字符  
    };  
  },  
  computed: {  
    filteredText() {  
      // 过滤掉零宽字符和首尾空格  
      return this.rawText.replace(/[\u200B\u200C\u200D\uFEFF\xA0]+/g, '').trim();  
    },  
  },  
};  
</script>

方法二：使用方法

如果你需要在多个地方处理类似的字符串，并且不想每次都创建计算属性，可以定义一个方法来进行处理。

<template>  
  <div>{{ filterText(rawText) }}</div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      rawText: " \u200B Hello, world! \u200B ", // \u200B 是零宽空格字符  
    };  
  },  
  methods: {  
    filterText(text) {  
      return text.replace(/[\u200B\u200C\u200D\uFEFF\xA0]+/g, '').trim();  
    },  
  },  
};  
</script>

自定义指令（可选，不推荐）

虽然不推荐，但如果你确实想通过自定义指令来实现类似的功能，你需要意识到指令主要用于操作 DOM，而不是处理数据。不过，你可以通过自定义指令来修改 DOM 元素的文本内容。

<template>  
  <div>{{ filterText(rawText) }}</div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      rawText: " \u200B Hello, world! \u200B ", // \u200B 是零宽空格字符  
    };  
  },  
  methods: {  
    filterText(text) {  
      return text.replace(/[\u200B\u200C\u200D\uFEFF\xA0]+/g, '').trim();  
    },  
  },  
};  
</script>

注意，使用自定义指令来处理数据并不是 Vue 的推荐做法，因为它将数据处理逻辑与 DOM 操作混合在一起，使得代码难以维护和理解。通常，你应该优先考虑使用计算属性或方法来处理数据。