vue如何将字符串的一部分处理为html文档并渲染到页面

目录
  • 将字符串的一部分处理为html文档并渲染到页面
    • 应用场景
    • 需求概述
    • 核心思路
  • vue和react如何正常渲染一段html字符串
    • 1.react的方法:dangerouslySetInnerHTMl 属性
    • 2.vue的方法:v-html

将字符串的一部分处理为html文档并渲染到页面

应用场景

做搜索功能是有搜索建议模块,该模块需要对等于输入搜索框字符串的字符串进行高亮显示,效果图如图所示:

需求概述

将字符串 str = "Hello world hello girls"中的hello添加样式为图所示颜色。

渲染核心组件为

 <van-cell
      v-for="(item, index) in suggestList"
      :key="index"
      icon="search"
      @click="sendResult(item)"
    >
      <div slot="title">{{item}}</div>
 </van-cell>

核心思路

将str = "Hello world hello girls" 转换为

<span style="color: blue;">Hello</span> world <span style="color: blue;">hello</span> girls

在 渲染到vue提供的命令v-html内就行了 , 第一种方法核心api为String.replace(),第二种方法核心api为 String.split() 和 Array.join()

第一种方法核心代码

highlight(str) {
      // 正则表达式//中间的字符只是字符串
      // 如果需要动态创建一个正则表达式
      // new RegExp(str, rules) str是正则字符串,rules是匹配模式写在字符串中
      const reg = new RegExp(this.suggestText, 'gi')
      const highStr = str.replace(reg, `<span style="color:#3296fa;">${this.suggestText}</span>`)
      return highStr
    },

我自己一开始想到的是vue提供的filters过滤器,发现对v-html内的内容没有用,并且设计过滤器使用时this指向了undefined ,后面就直接用函数包裹了代码如下:

<van-cell
      v-for="(item, index) in suggestList"
      :key="index"
      icon="search"
      @click="sendResult(item)"
    >
      <div slot="title" v-html="highlight(item)"></div>
    </van-cell>

第二种办法的核心代码 

highlight(str) {
      const arr = str.split(this.suggestText)
      const strHtml = arr.join(`<span style="color:blue">${this.suggestText}</span>`)
      return strHtml
    },

重代码量来讲第二种明显优于第一种方法,但是第二种难以想到用起来也很绕,但效率好代码少推荐常用

vue和react如何正常渲染一段html字符串

解析data对象中带有标签的des字段

1.react的方法:dangerouslySetInnerHTMl 属性

<div dangerouslySetInnerHTML = {{__html:返回的html代码片段}} ></div>
<div dangerouslySetInnerHTML = {{__html:data.des}} ></div>

原理:

1.dangerouslySetInnerHTMl 是React标签的一个属性,类似于angular的ng-bind;

2.有2个{{}},第一{}代表jsx语法开始,第二个是代表dangerouslySetInnerHTML接收的是一个对象键值对;

3.既可以插入DOM,又可以插入字符串;

2.vue的方法:v-html

<div v-html = "返回的html代码片段" ></div>
<div v-html = "data.des" >{{data.des}}</div>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

时间: 2022-06-20

vue.js实现数据库的JSON数据输出渲染到html页面功能示例

本文实例讲述了vue.js实现数据库的JSON数据输出渲染到html页面功能.分享给大家供大家参考,具体如下: 1.首先通过json.php把数据库给输出为json格式的数据 [ { "id":1, "resname":"百度", "resimg":"http://www.baidu.com/1.jpg", "resint":"2018-1-18", "re

Vue 将后台传过来的带html字段的字符串转换为 HTML

后台传过来 一个带标签的字符串  前端可以直接转换成html格式的,可是在vue中怎么办呢 在这个DEMO中,item.content所带的字符串将被转换为HTML代码. 注意:使用了v-html的标签中的内容将被item.content替代: <div class="item" v-for="item in socialArray"> <dl v-html="item.content"> {{item.content}}

VUE渲染后端返回含有script标签的html字符串示例

在接入支付宝支付模块的时候,支支返回的是一个form串,细看一下还有一个script标签,如何将其渲染出来给大家分享一下经验.注意点:不能在当前页面追加任何元素例如原生js:innerHtml.appendChiled等等:Vue原生v-html也不可以因为其只能渲染html标签,script不能够识别. 需要重新创建一个空白Vue组件,用router进行传参,传参方式(新窗口打开) let routeData = this.$router.resolve({ path: 'Recharge',

vue中将html字符串转换成html后遇到的问题小结

今天整理之前做vue项目时遇到的一些问题,发现了当时遇到的一个很小但是又会引出很多问题的一个问题(总之就是很有意思,听我慢慢给你到来),这个问题就是当时处理后端数据时,如何将后端返回来的字符串转换成html标签,其实根据vue官网的一个v-html方法是不是觉得很简单,当时我也是这样想的,可是我发现了几个问题(官网给出的动态渲染任意 HTML 容易导致 XSS 攻击的问题我就不说了,在这里我只是用它来渲染数据): 第一,当我用v-html将后端字符串转换成了html标签后,发现我在那个字符串中解

Python 将json序列化后的字符串转换成字典(推荐)

一般而言下面的就可以完成需求了. def convertToDic(data): jsonDic=json.loads(data) return dict(jsonDic) 但实际应用中可能会出现一些问题,因此有时候也可以增加一些异常处理: def convertToDic(data): try: jsonDic=json.loads(data) except json.decoder.JSONDecodeError: jsonDic={} try: dic=dict(jsonDic) exce

python函数中将变量名转换成字符串实例

考虑到在日常中,常常需要对模型指标输出,但涉及多个模型的时候,需要对其有标示输出,故需要将模型变量名转换成字符串. 看到的基本方法有两种: 一.方法层面: 方法1(函数内推荐): def namestr(obj, namespace): return [name for name in namespace if namespace[name] is obj] print(namestr(lr_origin,globals()),'\n', namestr(lr_origin,globals())

python 将字符串转换成字典dict的各种方式总结

1)利用eval可以将字典格式的字符串与字典户转 >>>mstr = '{"name":"yct","age":10}' 转换为可以用的字典: >>>eval(mstr), type( eval(mstr) ) {"name":"yct","age":10}, dict 2).JSON到字典转化: >>>dictinfo = json

python将字符串转换成json的方法小结

最近在工作中遇到了一个小问题,如果要将字符串型的数据转换成dict类型,我第一时间就想到了使用json函数.但是里面出现了一些问题 1.通过json来转换: In [1]: import json In [2]: mes = '{"InsId": 2, "name": "lege-happy", "CreationTime": "2019-04-23T03:18:02Z"}' In [3]: mes_to_

PHP实现将base64编码字符串转换成图片示例

本文实例讲述了PHP实现将base64编码字符串转换成图片.分享给大家供大家参考,具体如下: 步骤: 1. 获取base64文件: 复制代码 代码如下: $image="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRw

python将字符串转换成数组的方法

python将字符串转换成数组的方法.分享给大家供大家参考.具体实现方法如下: #----------------------------------------- # Name: string_to_array.py # Author: Kevin Harris # Last Modified: 02/13/04 # Description: This Python script demonstrates # how to modify a string by # converting it

js 字符串转换成数字的三种方法

方法主要有三种 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把值转换成浮点数.只有对String类型调用这些方法,这两个函数才能正确运行:对其他类型返回的都是NaN(Not a Number). 一些示例如下: 复制代码 代码如下: parseInt("1234blue");   //returns   1234parseInt("0xA");  

把json格式的字符串转换成javascript对象或数组的方法总结

第一种 JSON.parse(jsonString) 第二种 eval("("+jsonString+")") 第三种 var obj=(function ToJSON(o){ if(typeof(o)=="string")try{return new Function("return "+o)();}catch(e){return null;} })("[{name:'zhangsan',age:'24'},{na

将JSON字符串转换成Map对象的方法

页面向后台action传递一个json字符串,需要将json字符串转换成Map对象 public Map<String, String> toMap(Object object) { Map<String, String> data = new HashMap<String, String>(); // 将json字符串转换成jsonObject JSONObject jsonObject = JSONObject.fromObject(object); Iterato