详解Vue如何将多个空格被合并显示成一个空格

现象

最近在Vue2项目开发中遇到个奇怪的现象，用户往数据库存了中间有四个空格的数据，数据库存储正常，接口返回的数据也是带四个空格没问题，但页面展示只有一个空格。

原因

在HTML/Vue中，多个连续的空格会合并为一个空格。

解决方案

1.插值表达式 + 正则

<template>
  <span>{{ space1 }}</span> 
  <span>{{ space2} }</span>
</template>

<script>
 export default {
   data() {
     //正确写法
     space1: '这是   空格'.replace(/\s/g, '\xa0'),//页面显示效果：这是   空格
     //错误写法
     space2: '这是   空格'.replace(/\s/g, '&nbsp;'),//页面显示效果：这是&nbsp;&nbsp;&nbsp;空格
   }
 }
</script>

在Vue2中，如果使用插值表达，则需使用\xa0来表示空格，如果直接使用 来表示空格，它不会显示为空格，而是会被当成字符实体解析。

2.v-html指令 + 正则

<template>
  <span v-html="space1">{{ space1 }}</span> 
  <span v-html="space2">{{ space2} }</span>
</template>

<script>
 export default {
   data() {
     //正确写法1
     space1: '这是   空格'.replace(/\s/g, '\xa0'),//页面显示效果：这是   空格
     //正确写法2
     space2: '这是   空格'.replace(/\s/g, '&nbsp;'),//页面显示效果：这是   空格
   }
 }
</script>

在Vue2中，如果使用v-html指令方式，则用\xa0或 来表示空格都可以正常显示。

3.v-html指令／插值表达式 + CSS

如果不对空格进行转义，在v-html指令／插值表达式模式下直接给元素添加如下样式也能实现想要的效果。

<template>
  <span style="white-space:pre;" v-html="'这是   空格'"></span> 
</template>

其中，white-space:pre;是保留所有空白或换行符（回车键），可以实现原样输出。

番外

在Vue2中，如果在模板标签中直接使用 作为空格，则在 compile 的过程中会被转换成一个空格。而直接使用\xa0来表示空格，则会被当成字符实体解析。

<template>
  <!-- 页面显示效果：这是 空格 -->
  <span>这是&nbsp;&nbsp;&nbsp;空格'</span>
  <!-- 页面显示效果：这是\xa0\xa0\xa0 空格 -->
  <span>这是\xa0\xa0\xa0空格'</span>
</template>

HTML提供的几种空格实体

HTML提供的几种空格实体（space entity），它们拥有不同的宽度。非断行空格（ ）是常规空格的宽度，可运行于所有主流浏览器。其他几种空格（      ‌‍）在不同浏览器中宽度各异。

 

它叫不换行空格，全称No-Break Space，它是最常见和我们使用最多的空格，大多数的人可能只接触了 ，它是按下space键产生的空格。在HTML中，如果你用空格键产生此空格，空格是不会累加的（只算1个）。要使用html实体表示才可累加，该空格占据宽度受字体影响明显而强烈。

 

它叫半角空格，全称是En Space，en是字体排印学的计量单位，为em宽度的一半。根据定义，它等同于字体度的一半（如16px字体中就是8px）。名义上是小写字母n的宽度。此空格传承空格家族一贯的特性：透明的，此空格有个相当稳健的特性，就是其占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。

 

它叫角空格，全称是Em Space，em是字体排印学的计量单位，相当于当前指定的点数。例如，1 em在16px的字体中就是16px。此空格也传承空格家族一贯的特性：透明的，此空格也有个相当稳健的特性，就是其占据的宽度正好是1个中文宽度，而且基本上不受字体影响。

 

它叫窄空格，全称是Thin Space。我们不妨称之为瘦弱空格，就是该空格长得比较瘦弱，身体单薄，占据的宽度比较小。它是em之六分之一宽。

‌

它叫零宽不连字，全称是Zero Width Non Joiner，简称ZWNJ，是一个不打印字符，放在电子文本的两个字符之间，抑制本来会发生的连字，而是以这两个字符原本的字形来绘制。Unicode中的零宽不连字字符映射为U+200C。

‍

它叫零宽连字，全称是Zero Width Joiner，简称ZWJ，是一个不打印字符，放在某些需要复杂排版语言（如阿拉伯语、印地语）的两个字符之间，使得这两个本不会发生连字的字符产生了连字效果。零宽连字符的Unicode码位是U+200D。

此外，浏览器还会把以下字符当作空白进行解析：空格（ ）、制表位（	）、换行（
）和回车（
）还有（　）等等。

Js中的空格

1.String.fromCharCode(32)

2.\xa0：属于latin（ISO/IEC_8859-1，拉丁字母）中的扩展字符集字符，代表空白符nbsp(non-breaking space)。

3.\u0020 ：属于Unicode字符，用法和\xa0一样

4.\x20 ：标准键盘码值表-十六进制。

5.%20 ：对URI 进行解码的样式，需要用到decodeURIComponent。如decodeURIComponent('%20')后会显示1个空格。

6.\t: 这种相当于按了tab键，一个相当于4个空格。

到此这篇关于详解Vue如何将多个空格被合并显示成一个空格的文章就介绍到这了,更多相关Vue合并多个空格内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！