0


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

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

Unicode – The World Standard for Text and Emojihttps://home.unicode.org/![](https://i-blog.csdnimg.cn/direct/09772879ea2742569af3337a4ccc48cb.png)

一、零宽字符的特点

  • 不可见性:零宽字符在大多数程序或编辑器中是不可见的,它们不占据任何显示空间。
  • 功能性:尽管不可见,但零宽字符在文本处理、排版、隐写术和程序开发中扮演着重要角色。
  • 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 操作混合在一起,使得代码难以维护和理解。通常,你应该优先考虑使用计算属性或方法来处理数据。


本文转载自: https://blog.csdn.net/qq_15557073/article/details/142170718
版权归原作者 小木木爸 所有, 如有侵权,请联系我们删除。

“零宽字符应用场景及前端解决方案”的评论:

还没有评论