Vue中多个空格被合并显示成一个空格,怎么破?

现象:

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

原因:

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

解决方案:

一、插值表达式 + 正则

<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来表示空格,如果直接使用&nbsp;来表示空格,它不会显示为空格,而是会被当成字符实体解析。

二、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&nbsp;来表示空格都可以正常显示。

三、v-html指令/插值表达式 + CSS

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

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

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

番外:

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

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

二、HTML提供的几种空格实体

HTML提供的几种空格实体(space entity),它们拥有不同的宽度。非断行空格( )是常规空格的宽度,可运行于所有主流浏览器。其他几种空格(&ensp; &emsp; &thinsp; &zwnj;&zwj;)在不同浏览器中宽度各异。

&nbsp;

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

&ensp;

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

&emsp;

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

&thinsp;

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

&zwnj;

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

&zwj;

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

此外,浏览器还会把以下字符当作空白进行解析:空格(&#x0020;)、制表位(&#x0009;)、换行(&#x000A;)和回车(&#x000D;)还有(&#12288;)等等。

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个空格。

原文链接:https://juejin.cn/post/7352739150243397647 作者:HED

(0)
上一篇 2024年4月2日 上午11:10
下一篇 2024年4月2日 下午4:02

相关推荐

发表评论

登录后才能评论