零宽字符（Zero Width Characters）是一类在文本中不可见但具有特定功能的特殊字符。称为零宽字符，也叫幽灵字符。它们在显示时不占据任何空间，但在文本处理和显示中发挥着重要作用。这些字符主要包括零宽度空格、零宽度非连接符、零宽度连接符和零宽度无断行空格等。以下是对零宽字符的详细解析：
Unicode – The World Standard for Text and Emoji
https://home.unicode.org/
一、零宽字符的特点
- 不可见性：零宽字符在大多数程序或编辑器中是不可见的，它们不占据任何显示空间。
- 功能性：尽管不可见，但零宽字符在文本处理、排版、隐写术和程序开发中扮演着重要角色。
- Unicode编码：零宽字符是Unicode字符集中的一部分，每个字符都有对应的Unicode码位。
二、常见的零宽字符及其用途
- 零宽度空格（Zero-Width Space, ZWSP）
- Unicode码位：U+200B
- 用途：用于较长单词的换行分隔，防止在不应该换行的地方发生换行。
- 零宽度非断空格符（Zero Width No-Break Space, ZWNBSP）
- Unicode码位：U+FEFF（注意：U+FEFF通常作为字节顺序标记，但在某些上下文中也用作非断空格符）
- 用途：用于阻止特定位置的换行分隔，确保文本在特定位置不断行。
- 零宽度连接符（Zero-Width Joiner, ZWJ）
- Unicode码位：U+200D
- 用途：在某些需要复杂排版语言（如阿拉伯语、印地语）中，使两个本不会发生连字的字符产生连字效果。
- 零宽度非连接符（Zero-Width Non-Joiner, ZWNJ）
- Unicode码位：U+200C
- 用途：用于阿拉伯文、德文、印度语系等文字中，阻止会发生连字的字符间的连字效果，保持字符的独立形态。
- 左至右符（Left-to-Right Mark, LRM）
- Unicode码位：U+200E
- 用途：在混合文字方向的多种语言文本中，规定排版文字书写方向为左至右。
- 右至左符（Right-to-Left Mark, RLM）
- Unicode码位：U+200F
- 用途：在混合文字方向的多种语言文本中，规定排版文字书写方向为右至左。
三、零宽字符的应用场景
- 数据防爬：将零宽度字符插入文本中，可以干扰爬虫的关键字匹配，从而保护数据不被轻易爬取。
- 信息传递：通过自定义组合的零宽度字符，可以在用户复制文本时携带不可见信息，实现信息的隐蔽传递。
- 隐形水印：利用零宽度字符的不可见性，可以在文件中添加隐形水印，用于追踪文件的分享者。
- 加密信息分享：零宽度字符可用于加密敏感信息，通过特定的浏览器插件进行解密，实现隐蔽的信息分享。
- 逃脱敏感词过滤：在需要避免敏感词过滤的场景中，可以使用零宽度字符来绕过过滤机制，保持信息的原意。
综上所述，零宽字符虽然不可见，但在文本处理、排版、隐写术和程序开发中具有广泛的应用价值。理解和正确使用这些字符，可以帮助解决一些复杂的文本处理和显示问题。
四、实验
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 操作混合在一起，使得代码难以维护和理解。通常，你应该优先考虑使用计算属性或方法来处理数据。
