后台返回给前端的富文本数据如:

{
"status": 1,
"info": "获取活动数据成功",
"data": [
{
"id": "000",
"img_src": "http://zt.52hangjia.com/Uploads/Picture/Picture/2020-07-18/710_280_5f129d7074a92.png",
"name": "广告测试",
"adpic": "生活如此多娇,引无数英雄竞折腰<img src="http://zt.52hangjia.com/Uploads/Attached/image/20200718/20200718150334_88259.png" alt="" />"
}
]
}

  

如果直接 将adpic的数据append,或者html 是不起作用,这样只能利用浏览器的解析成html代码的字符串,所以首先我们要先将特殊字符转换,如下解析

	var date=ret.data;
if(ret.status==1){
function escape2Html(str) {
var arrEntities={'lt':'<','gt':'>','nbsp':' ','amp':'&','quot':'"'};
return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){return arrEntities[t];});
}
var strHT=escape2Html(date[0].adpic);
$("#chess").html(strHT)

  展示如下:

富文本数据 解析HTML的更多相关文章

  1. 采用Json字符串,往服务器回传大量富文本数据时,需要注意的地方,最近开发时遇到的问题。

    json字符串中存在常规的用户输入的字符串,和很多的富文本样式标签(用户不能直接看到,点击富文本编辑器中的html源码按钮能看到),例如下面的: <p><strong>富文本& ...

  2. ajax获取富文本数据无法正常渲染到页面问题

    有时候富文本渲染到页面的时候 会连带标签一起渲染出来. 解决办法: 首先引用    <script src="https://cdn.jsdelivr.net/npm/fuwenben ...

  3. SolrCloud索引富文本数据

    solrconfig配置文件: schema配置文件: 执行目录: /opt/solr-5.5.4/server/scripts/cloud-scripts -- 下载配置文件 ./zkcli.sh ...

  4. SpringBoot中Post请求提交富文本数据量过大参数无法获取的问题

    yml增加配置 # 开发环境配置 server: tomcat: max-http-form-post-size: -1

  5. 服务端JSON内容中有富文本时

    问题背景 由于数据中存在复杂的富文本,包含各种引号和特殊字符,导致后端和前端通过JSON格式进行数据交互引发前端JSON解析出错. 解决方案 后端将富文本内容 ConvertToBase64Strin ...

  6. 关于百度Editor富文本编辑器 自定义上传位置

    因为要在网站上编辑富文本数据,所以直接采用百度的富文本编辑器,但是这个编辑器有个缺点,默认情况下,文件只能上传到网站的根目录,不能自定义路径. 而且json配置文件只能和controller.jsp在 ...

  7. Java 实现HTML富文本导出至word完美解决方案

    一. 问题的提出 最近用java开发一个科技项目信息管理系统,里面有一个根据项目申请书的模板填写项目申报信息的功能,有一个科技项目申请书word导出功能. 已有的实现方式:采用标准的jsp模板输出实现 ...

  8. 9、NFC技术:NDEF文本格式解析

    NDEF文本格式规范     不管什么格式的数据本质上都是由一些字节组成的.对于NDEF文本格式来说.这些数据的第1个字节描述了数据的状态,然后若干个字节描述文本的语言编码,最后剩余字节表示文本数据. ...

  9. UEditor富文本编辑器简单使用

    UEditor富文本编辑器简单使用 一.下载地址:https://ueditor.baidu.com/website/ 官网中并没有 python 版本的 UEditor 富文本编辑器,本文简单介绍 ...

随机推荐

  1. ftp的passive模式

    ftp的passive模式 今天在一台测试服务器上搭建ftp,折腾了许久. 主要是不了解ftp的passive模式和port模式的区别.这里记录一下. 和passive模式对应的叫做port模式,也叫 ...

  2. 二.drf之使用序列化编写视图

    总结:两功能序列化: a.拿到queryset --->idc = Idc.objects.all() b.将queryset给序列化成类---->serializer = IdcSeri ...

  3. TensorFlow中的显存管理器——BFC Allocator

    背景 作者:DeepLearningStack,阿里巴巴算法工程师,开源TensorFlow Contributor] 使用GPU训练时,一次训练任务无论是模型参数还是中间结果都需要占用大量显存.为了 ...

  4. vue.js之常操作(实例)

    听说大家都开始用react.vue这些MVVM框架了,为了不落后,还是学学吧!(之前只对angular了解一点,时间一长,也忘得差不多了,所以学习vue相当于从小白开始) 从vue.js官网看一下,先 ...

  5. 关键字: this的使用

    1.可以调用的结构:属性.方法:构造器2.this调用属性.方法:this理解为:当前对象 或 当前正在创建的对象 2.1 在类的方法中,我们可以使用"this.属性"或" ...

  6. MyBatis-Plus 用起来真的很舒服

    一.MyBatis-Plus 1.简介 MyBatis-Plus 是一个 Mybatis 增强版工具,在 MyBatis 上扩充了其他功能没有改变其基本功能,为了简化开发提交效率而存在. 官网文档地址 ...

  7. day38 并发编程(理论)

    目录 一.操作系统发展史 二.多道技术 1 单核实现并发的效果 2 多道技术图解 3 多道技术重点 三.进程理论 1 必备知识点 2 进程调度 3 进程的三状态 4 两对重要概念 四.开启进程的两种方 ...

  8. day35 socket套接字介绍

    目录 一.套接字发展史与分类 二.套接字工作流程 三.基于tcp的套接字 一.套接字发展史与分类 套接字起源于 20 世纪 70 年代加利福尼亚大学伯克利分校版本的 Unix,即人们所说的 BSD U ...

  9. React中setState 什么时候是同步的,什么时候是异步的?

    class Example extends React.Component { constructor() { super(); this.state = { val: 0 }; } componen ...

  10. 解决Chrome插件安装时程序包无效:"CRX_HEADER_INVALID"

    打开chorme的扩展程序(设置——>更多工具——>扩展程序)chrome://extensions 选择开发者模式 拖拽.crx至Chrome的扩展程序列表 安装失败 报错为:程序包无效 ...