文本编辑文本中的各种空格

fengyehongWorld

已于 2024-07-28 17:20:14 修改

阅读量703

点赞数 17

分类专栏：小知识文章标签：文本编辑

于 2024-07-28 17:06:22 首次发布

本文链接：https://blog.csdn.net/feyehong/article/details/140750735

版权

小知识专栏收录该内容

4 篇文章 0 订阅

订阅专栏

参考资料

零. 各种空格在Notepad++中的效果

在这里插入图片描述

一. 半角空格

Unicode名称：Space
Unicode编号：U+0020
HTML代码：

⏹中文或英文输入法中，按下空格键，就完成了半角空格的输入。

二. 全角空格

Unicode名称：Ideographic Space
Unicode编号：U+3000
HTML代码：

⏹切换为日语输入法的平假名 或者全角字母数字模式，按下空格键，就完成了全角空格的输入。

三. TAB空格

Unicode名称：Horizontal Tabulation
Unicode编号：U+0009
HTML代码：

⏹按下键盘上的Tab键，就完成了Tab空格的输入。

四. 无中断空格

4.1 定义

Unicode名称：No-Break Space
Unicode编号：U+00A0
HTML代码：
-  
-

⏹  和   都表示不间断空格，可以用于防止浏览器将连续空格合并并防止换行。

  是命名字符引用，较为直观和易读。
  是数字字符引用

4.2 HTML展示

<body>
    <p>This is an example of using space: word1&nbsp;&nbsp;word2.</p>
    <p>This is an example of using space: word1&#160;&#160;word2.</p>
</body>

在这里插入图片描述

4.3 输入

⏹方式1

按住键盘上Alt键，在小键盘区域输入0160之后，松开Alt键，即可完成输入。

⏹方式2

在这里插入图片描述

五. 零宽空格

5.1 定义

Unicode名称：Zero Width Space
Unicode编号：U+200B
HTML代码：

5.2 HTML展示

id为p1的p标签没有使用零宽空格
id为p2的p标签使用了零宽空格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Zero Width Space Example</title>
</head>
<body>
    ⏹未使用零宽空格
    <p id="p1">This is an example of using zerowidthspace.</p>

    ⏹使用了零宽空格
    <p id="p2">This is an example of using zero&#8203;width&#8203;space.</p>
</body>
<script>
    const result1 = document.querySelector('#p1').textContent;
    console.log(result1);
    // ⏹打印字符串的长度
    console.log(result1.length);
    console.log('-------------------------------');

    const result2 = document.querySelector('#p2').textContent;
    console.log(result2);
    // ⏹打印字符串的长度
    console.log(result2.length);
</script>
</html>

可以看到，在HTML中，对用户展示的效果相同
但是两个字符串的长度实际上不相同，使用了零宽空格的字符串多了两个长度
复制打印到控制台上的内容到NotePad++中，就可以明显的看出来零空格字符串

在这里插入图片描述
🤪🤪🤪

下面这两段文本，看似相同，但实际上复制到NotePad++中，就可以看到第二段文字多了零宽空格。

This is an example of using zerowidthspace.
This is an example of using zerowidthspace.

🤔🤔🤔
由于使用了零宽空格，当我们双击zerowidthspace单词的时候，可以看到，未添加零宽空格的zerowidthspace被整体选中
而添加了零宽空格的zerowidthspace只能被选中部分，因为此时的zerowidthspace已经不是一个整体。

在这里插入图片描述

5.3 输入

在这里插入图片描述

5.2 应用场景

⏹零宽空格是一个不可见字符，常用于文本处理和排版，尤其是在不希望显示任何空格但需要进行字符分隔或排版控制时。

防止自动链接：在URL或电子邮件地址中插入零宽空格，以防止它们被自动识别为链接。
数据防爬：将零宽度字符插入文本中，干扰关键字匹配。爬虫得到的带有零宽度字符的数据会影响他们的分析，但不会影响用户的阅读数据。
信息传递：将自定义组合的零宽度字符插入文本中，用户复制后会携带不可见信息，达到传递作用。
隐形水印：通过零宽度字符我们可以对内部文件添加隐形水印。在浏览者登录页面对内部文件进行浏览时，我们可以在文件的各处插入使用零宽度字符加密的浏览者信息，如果浏览者又恰好使用复制粘贴的方式在公共媒体上匿名分享了这个文件，我们就能通过嵌入在文件中的隐形水印轻松找到分享者了。