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

小木木爸 2024-10-11 08:33:01 阅读 64

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

Unicode – The World Standard for Text and Emoji

icon-default.png?t=O83A

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

<code><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 操作混合在一起,使得代码难以维护和理解。通常,你应该优先考虑使用计算属性或方法来处理数据。



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。