vue中解析转义字符

Posted 2023-05-12 冰晨之露

最近在写一个后台，后台需要展示富文本的内容，按理说使用v-htmll标签就可以，但是当我使用后，却发现页面展示的依旧是html标签，

这时我仔细看了一下返回的富文本内容，发现里边包含了展示转义字符

<p style="line-height:150%"><span style=";font-family:宋体;line-height:150%;font-size:16px"><span style="font-family:宋体">口腔临床医学硕士</span></span></p><p style="line-height:150%"><span style="font-family: 宋体; text-indent: 96px;">副教授</span></p><p><br/></p&gt

具体代码如上：

随后使用以下方法:

 escape2Html(str)                             //转义字符转换普通字符的方法
      var arrEntities=\'lt\':\'<\',\'gt\':\'>\',\'nbsp\':\' \',\'amp\':\'&\',\'quot\':\'"\';
      return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t)return arrEntities[t];);
    

　　使用该方法即可得到如下字段，

<p >
　　<span >
　　　　<span >111</span>
　　</span>
</p>
<p ><span >222</span></p><p><br/></p>

　　在使用v-html就可以展示当前的富文本了

vue-editor怎么加空格

vue-editor怎么加空格解决方法（uni-app也一样）
先说一下，’\u00a0’是’nbsp’的16进制表示，其他空格也可以使用下表的值：
在此之前，看了很多用法，都是说用空格占位符或者转义字符的，但是vue中直接放在文字里只能有一个空格

我解决的方法就是把占位符或者转义字符放在标签的v-html中，这个用法才能实现多个空格
ps：vue的v-html中要用转义字符的16进制表示
同样，uni-app中text标签中有decode属性，但是我着实没用明白，空格也是用的v-html
</text><text v-html="' '"></text>
登录后复制
ps:当时我就是想用空格，所以我找了好多方法，钻了牛角尖如今终于找到了，后来想想其实给文字加一个span标签，然后加padding也能实现要的效果，毕竟当时我是想就用空格，我就不用别的，我就用空格，哈哈哈 参考技术A 你好，这样加空格的，很多码农对于这个编辑器插件空格回显很头疼！确实，刚开始我也头痛，使劲网上搜索，给我的结果如下，
通过摸搜测试终于实现了 希望我的办法也对你有用

解决方案：1：修改插件的css 去掉这个white-space: pre-wrap; 最好在搜索下……！审核代码 编辑空格应该会显示有了；

注：不过这里只是显示 但是现在是打两个空格才显示一个 还有一个依然显示 空 ；编辑好的文案发布之后 在编辑又缩进一半

2：现在是js部分 quill.js文件（解决文案缩进的问题）加个空格 完美解决 参考技术B 把占位符或者转义字符放在标签的v-html中，这个用法才能实现多个空格
ps：vue的v-html中要用转义字符的16进制表示
在这里插入图片描述在这里插入图片描述

同样，uni-app中text标签中有decode属性，空格也是用的v-html 参考技术C 
要在密码两字中间添加空格，发现直接添加 是识别不了的，正确写法为：



代码：

<el-form-item label="密 码:" :label-width="formLabelWidth" prop="password">
<label slot="label">密 码:</label>
<el-input
type="password"
v-model="FormData.password"
placeholder="请输入密码"
autocomplete="off"
show-password
></el-input>
</el-form-item>
补充知识：vue + elementUI 给input输入框添加 字体小图标

基于vue框架，使用element-ui组件库写表单效果，需要添加字体小图标，效果如下：



1.只需要添加prefix-icon="iconfont icon-xxx"即可（头部插入）

//例如
<el-input
prefix-icon="iconfont icon-sousuo"
v-model="searchTableInfo"
placeholder="请输入姓名"
style="width:240px"
></el-input>
2.添加suffix-icon=“iconfont icon-xxx”（尾部添加）

//例如
<el-input
suffix-icon="iconfont icon-sousuo"
v-model="searchTableInfo"
placeholder="请输入姓名"
style="width:240px"
></el-input>
以上这篇vue用elementui写form表单时,在label里添加空格操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。