首页 > 其他分享 >vue中解析转义字符

vue中解析转义字符

时间:2023-05-12 09:03:42浏览次数:33  
标签:style gt span quot lt 转义字符 vue 解析

最近在写一个后台,后台需要展示富文本的内容,按理说使用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 style="line-height:150%">
  <span style=";font-family:宋体;line-height:150%;font-size:16px">
    <span style="font-family:宋体">111</span>
  </span>
</p>
<p style="line-height:150%"><span style="font-family: 宋体; text-indent: 96px;">222</span></p><p><br/></p>

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

标签:style,gt,span,quot,lt,转义字符,vue,解析
From: https://www.cnblogs.com/bingchenzhilu/p/17392755.html

相关文章

  • VUE
    Vue的基本常识Vue的使用方式vuejs的使用官方提供了2种方式:基于脚本导入使用,下载vue.js文件,通过script标签引入到html网页。基于项目构建工具来进行使用,需要安装项目构建工具,自动构建成一个独立的项目。目前官方推荐的项目构建工具:vue-CLI,vite。Vue调试工具VueDevtools......
  • vue版本报错
     在引入部分加入@2声明是vue2版本即可   ......
  • vue项目中封装localStorage和sessionStorage
    1.为什么需要封装localStorage和sessionStorage?因为封装localStorage和sessionStorage可以提高程序的维护性、可重用性和扩展性,同时也可以使代码更为简单、易懂。2.以下是一个简单的代码封装示例可以新建一个utils目录文件,在该文件下新建storage.js文件进行封装//封装local......
  • vue3 setup 父页面调用子组件及子组件调用父页面方法的DEMO
    父页面调用子组件中方法父页面<template><div><!--第四步:页面使用子组件,并添加ref属性,注意ref属性不能和子组件重名--><role-cardref="roleRef"></role-card></div></template><scriptlang="ts"setup>import{ref......
  • 多线程篇-线程安全-原子性、可见性、有序性解析
    在程序中使用多线程的目的是什么?1、提高效率,增加任务的吞吐量2、提升CPU等资源的利用率,减少CPU的空转多线程的应用在日常开发中很多,带来了很多的便利,让我们以前研究下在多线程场景中要注意问题吧,一般主要从这三个方面考虑1、原子性2、可见性3、有序性如果不能保证原......
  • 若依vue导入流程
     下载链接若依官方找配置后端1.下载解压vue源码2.配置maven,如有跳过3.导入idea4.修改数据库配置文件5.部署redis和mysql6.导入数据库7.启动后端springboot测试http://localhost:8080/captchaImage配置前端1.安装nodejs2.在idea的终端执行cdruoyi-uinpminstall--registry=h......
  • Vue3 + Vite4.3 + Element-Plus + TypeScript 从0到1搭建企业级后台管理系统(前后端开
    vue3-element-admin是基于vue-element-admin升级的Vue3+ElementPlus版本的后台管理前端解决方案,技术栈为Vue3+Vite4+TypeScript+ElementPlus+Pinia+VueRouter等当前主流框架。相较于其他管理前端框架,vue3-element-admin的优势在于一有一无有配套后端、无......
  • 创建vue3项目 @符号提示
    1、新建jsconfig.json如何配置以下内容即可提示{"compilerOptions":{"baseUrl":"./","paths":{"@/*":["src/*"]}}}2、实际上面配置只是联想提示作用,需要在vue.config.js或vite.config......
  • https://pengchenggang.github.io/vuejsdev-com-github 备份发布
    https://pengchenggang.github.io/vuejsdev-com-github备份发布现在还没有解决的就是开clash,代码提交不上去,只能关了提,但是关了提交,也得赶运气。提交代码体验很差~......
  • Vue3 01 -- 初识Vue3
    Vue3组合式API 在vue2的版本里,数据和函数是分开维护的,并且调用时还要用到mount或者Create。但是在vue3的版本里,经过setup的语法糖,能够实现集中式维护,一个功能写的代码能放在一起,且代码量更少了。 使用create-vue创建项目在工作目录下,用命令行运行npminitvue@latest......