侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

js处理网页编辑器转义、去除转义、去除HTML标签的正则

前端  /  管理员 发布于 3年前   224

富文本编辑器生成的HTML标签,进行转义,然后写入数据库,防止脚本注入:

function htmlEncode(value){  return $('<div/>').text(value).html();}

1、从数据库拿出的转义后的HTML标签内容,先得去除转义,然后再去除HTML标签,是生成缩略文字。

/*移除HTML标签代码*/ function removeHTMLTag(str) {   str = str.replace(/<\/?[^>]*>/g,''); //去除HTML tag   str = str.replace(/[ | ]*\n/g,'\n'); //去除行尾空白   //str = str.replace(/\n[\s| | ]*\r/g,'\n'); //去除多余空行   str=str.replace(/ /ig,'');//去掉    return str; } //转意符换成普通字符 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];});  } 

如果是文章详情页的话,直接去除转义就可以显示在页面了:

 //转意符换成普通字符 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];});  } 

2、JS正则过滤(去除)富文本编辑器中的FONT-SIZE标签

var test=test.replace(/font-size:\w+;?/g,'');

3、js处理去掉富文本编辑的html,样式,只显示纯文字内容,以供列表页使用

<script type="text/javascript">var description = '<p style="margin-top:19.5pt;margin-right:0cm;margin-bottom:19.5pt;margin-left: 0cm;text-indent:24.1pt;mso-char-indent-count:2.0;mso-pagination:widow-orphan"> <b><span lang="EN-US" style="font-family:宋体;mso-bidi-font-family:宋体;color:#252525">1.</span></b><b><span style="font-family:宋体;mso-bidi-font-family:宋体;color:#252525">国际保险经纪行业收入分析<span lang="EN-US"><o:p></o:p></span></span></b></p> <p style="margin-top:19.5pt;margin-right:0cm;margin-bottom:19.5pt;margin-left: 0cm;text-indent:24.0pt;mso-char-indent-count:2.0;mso-pagination:widow-orphan"> <span lang="EN-US" style="font-family:宋体;mso-bidi-font-family:宋体;color:#252525">2010</span><span style="font-family:宋体;mso-bidi-font-family:宋体;color:#252525">年全球保险经纪行业市场规模为<span lang="EN-US">437.56</span>亿美元,<span lang="EN-US">2015</span>年增长至<span lang="EN-US">581.3</span>亿美元。<span lang="EN-US"><o:p></o:p></span></span></p> <p align="center" style="margin-top:19.5pt;margin-right:0cm;margin-bottom:19.5pt; margin-left:0cm;text-align:center;mso-pagination:widow-orphan"> <span lang="EN-US" style="font-family:宋体;mso-bidi-font-family:宋体;color:#252525">2010-2015</span><span style="font-family:宋体;mso-bidi-font-family:宋体;color:#252525">年国际保险经纪行业市场规模:亿美元</span></p> <p style="margin: 19.5pt 0cm; text-indent: 24.1pt; text-align: center;"> <img alt="" src="/baoxian/userfiles/1/images/back/news/2018/01/11.png" style="width: 493px; height: 296px;" /></p> <p style="margin-top:19.5pt;margin-right:0cm;margin-bottom:19.5pt;margin-left: 0cm;text-indent:24.1pt;mso-char-indent-count:2.0;mso-pagination:widow-orphan"> <b><span lang="EN-US" style="font-family:宋体;mso-bidi-font-family:宋体;color:#252525">2.</span></b><b><span style="font-family:宋体;mso-bidi-font-family:宋体;color:#252525">国际保险经纪行业并购分析<span lang="EN-US"><o:p></o:p></span></span></b></p> <p style="margin-top:19.5pt;margin-right:0cm;margin-bottom:19.5pt;margin-left: 0cm;text-indent:24.0pt;mso-char-indent-count:2.0;mso-pagination:widow-orphan"> <span style="font-family:宋体;mso-bidi-font-family:宋体;color:#252525">保险经纪公司并购较为频繁,<span lang="EN-US">2011</span>年并购数量为<span lang="EN-US">351</span>件,且呈现增长趋势。一股保险行业的并购风潮正席卷全球各个市场。如意大利投资集团<span lang="EN-US">Exor</span>收购再保险公司<span lang="EN-US">PartnerRe</span>、韬睿惠悦与韦莱集团、韦莱与法国保险经纪公司<span lang="EN-US">GrasSavoye</span>、瑞士保险集团<span lang="EN-US">ACE</span>并购<span lang="EN-US">Chubb</span>以及美国保险公司<span lang="EN-US">Anthem</span>收购<span lang="EN-US">Cigna</span>。而这些不过是近年来保险业并购案清单的一小部分。<span lang="EN-US"><o:p></o:p></span></span></p> <p style="margin-top:19.5pt;margin-right:0cm;margin-bottom:19.5pt;margin-left: 0cm;text-indent:24.0pt;mso-char-indent-count:2.0;mso-pagination:widow-orphan"> <span style="font-family:宋体;mso-bidi-font-family:宋体;color:#252525">然而,在热闹喧嚣的并购消息背后却是严酷的现实。波士顿咨询(<span lang="EN-US">BCG</span>)对<span lang="EN-US">1990</span>~<span lang="EN-US">2014</span>年间<span lang="EN-US">778</span>件涉及保险业的并购案进行了分析,对并购后一年内的股东总回报进行了追踪,最终发现只有<span lang="EN-US">51%</span>的并购能实际创造价值,而<span lang="EN-US">49%</span>的并购案则摧毁了公司的价值。近半数并购案失败可归咎为三大原因:并购准备和执行、并购后整合以及并购时机。<span lang="EN-US"><o:p></o:p></span></span></p> <p style="margin-top:19.5pt;margin-right:0cm;margin-bottom:19.5pt;margin-left: 0cm;text-indent:24.1pt;mso-char-indent-count:2.0;mso-pagination:widow-orphan"> <b><span lang="EN-US" style="font-family:宋体;mso-bidi-font-family:宋体;color:#252525">3.</span></b><b><span style="font-family:宋体;mso-bidi-font-family:宋体;color:#252525">保险业持续大整合<span lang="EN-US"><o:p></o:p></span></span></b></p> <p style="margin-top:19.5pt;margin-right:0cm;margin-bottom:19.5pt;margin-left: 0cm;text-indent:24.0pt;mso-char-indent-count:2.0;mso-pagination:widow-orphan"> <span style="font-family:宋体;mso-bidi-font-family:宋体;color:#252525">未来<span lang="EN-US">5</span>年,多个宏观层面的因素将继续推动保险业进行整合。首先是监管继续收紧,尤其是对资本充足率的要求将继续提升,无论是独立保险商还是综合集团都将感到更大的资金压力。利率和投资回报将继续保持较低水平(至少在成熟市场),使传统的寿险业务盈利能力受到限制。<span lang="EN-US"><o:p></o:p></span></span></p> <p style="margin-top:19.5pt;margin-right:0cm;margin-bottom:19.5pt;margin-left: 0cm;text-indent:24.0pt;mso-char-indent-count:2.0;mso-pagination:widow-orphan"> <span style="font-family:宋体;mso-bidi-font-family:宋体;color:#252525">此外,新兴竞争对手的威胁也不可小觑,甚至大型连锁超市和电信公司都有可能颠覆保险行业的价值链。这些企业不但拥有价值连城的消费者数据,而且拥有与客户之间的“最后一公里”连接。在新的运营模式下,传统保险企业难以掌控整条价值链,且容易成为新型商业模式的颠覆目标,例如一些网络聚合搜索产品能够为消费者提供价格透明的产品对比。<span lang="EN-US"><o:p></o:p></span></span></p> <p style="margin-top:19.5pt;margin-right:0cm;margin-bottom:19.5pt;margin-left: 0cm;text-indent:24.0pt;mso-char-indent-count:2.0;mso-pagination:widow-orphan"> <span style="font-family:宋体;mso-bidi-font-family:宋体;color:#252525">资金充裕的大型保险公司可以利用投资抵御创新带来的威胁,而那些只聚焦于内部运营,对外部变化视而不见的中型企业将面临更激烈的竞争。对于保险公司来说,了解消费者的行为和需求是至关重要的能力,然而建设必需的大数据技术、文化和团队带来的成本巨大,让规模较小的保险公司难以承受。对于保险企业来说,有机成长的机会非常有限。成熟市场已经进入到整合周期内,尽管新兴市场存在着发展机遇,但市场环境非常复杂。要在新市场形成规模效应,并购显然仍是各大保险企业的明智之选。<span lang="EN-US"><o:p></o:p></span></span></p> <p align="center" style="margin-top:19.5pt;margin-right:0cm;margin-bottom:19.5pt; margin-left:0cm;text-align:center;mso-pagination:widow-orphan"> <span style="font-family:宋体;mso-bidi-font-family:宋体;color:#252525">世界排名前十保险经纪公司国际业务占比<span lang="EN-US"><o:p></o:p></span></span></p> <p align="center" style="margin-top:19.5pt;margin-right:0cm;margin-bottom:19.5pt; margin-left:0cm;text-align:center;mso-pagination:widow-orphan"> <img alt="" src="/baoxian/userfiles/1/images/back/news/2018/01/12.png" style="width: 554px; height: 289px;" /></p> <p style="margin-top:19.5pt;margin-right:0cm;margin-bottom:19.5pt;margin-left: 0cm;text-indent:24.1pt;mso-char-indent-count:2.0;mso-pagination:widow-orphan"> <b><span lang="EN-US" style="font-family:宋体;mso-bidi-font-family:宋体;color:#252525">4.</span></b><b><span style="font-family:宋体;mso-bidi-font-family:宋体;color:#252525">国际保险经纪行业利润水平<span lang="EN-US"><o:p></o:p></span></span></b></p> <p style="margin-top:19.5pt;margin-right:0cm;margin-bottom:19.5pt;margin-left: 0cm;text-indent:24.0pt;mso-char-indent-count:2.0;mso-pagination:widow-orphan"> <span style="font-family:宋体;mso-bidi-font-family:宋体;color:#252525">目前,<span lang="EN-US">2015</span>年全球保险经纪行业收入达<span lang="EN-US">581.3</span>亿美元,国际保险经纪行业利润水平维持在<span lang="EN-US">10~25%</span>之间。<span lang="EN-US"><o:p></o:p></span></span></p>';description = description.replace(/(\n)/g, ""); description = description.replace(/(\t)/g, ""); description = description.replace(/(\r)/g, ""); description = description.replace(/<\/?[^>]*>/g, ""); description = description.replace(/\s*/g, "");console.log(description) </script>

4、jQuery JavaScript正则表达式与\n代替<BR>

Lee TaylorTeneff给出了该问题的处理方式:

var str = document.getElementById('mydiv').innerHTML;
document.getElementById('mytextarea').innerHTML = str.replace(/<br\s*[\/]?>/gi, "\n");

or using jQuery:

var str = $("#mydiv").html();
var regex = /<br\s*[\/]?>/gi;
$("#mydiv").html(str.replace(regex, "\n"));

5、要去除html标签,图片,换行,回车等

description = description.replace(/(\n)/g, "");description = description.replace(/(\t)/g, "");description = description.replace(/(\r)/g, "");description = description.replace(/<\/?[^>]*>/g, "");description = description.replace(/\s*/g, "");

6、小编写的一个替换fackeditor中的多余br与空行的

//加强替换主要是考虑多个br的问题function doRepAdvance(s){var str=s.replace(/<p><br type="_moz"><\/p>/ig,"");str=str.replace(/<br type="_moz">\n <\/p>/ig, "</p>");str=str.replace(/<br type="_moz">\n<\/p>/ig, "</p>");str=str.replace(/<br type="_moz">\n\r<\/p>/ig, "</p>");str=str.replace(/<br type="_moz"><\/p>/ig,"</p>");str=str.replace(/<br \/>\n <\/p>/ig, "</p>");str=str.replace(/<br>\n <\/p>/ig, "</p>");str=str.replace(/<br \/>\n<\/p>/ig, "</p>");str=str.replace(/<br \/>\n\r<\/p>/ig, "</p>");str=str.replace(/(<br>\n){1,}<\/p>/ig,"</p>");str=str.replace(/(<br>){1,}<\/p>/ig,"</p>");str=str.replace(/<br>\n<\/p>/ig, "</p>");str=str.replace(/<br><\/p>/ig,"</p>");str=str.replace(/<p> <\/p>/ig,"");str=str.replace(/<p> <\/p>/ig,"");str=str.replace(/<p> <\/p>/ig,"");str=str.replace(/<p><\/p>/ig,"");return str;}

到此这篇关于js处理富文本编辑器转义、去除转义、去除HTML标签的正则的文章就介绍到这了,更多相关编辑器转义、去除转义、去除HTML标签内容请搜素以前的文章或下面相关文章,希望大家以后多多支持!


  • 上一条:
    js通过正则匹配没有内容的空标签
    下一条:
    JS正则(RegExp)判断文本框中是否包含特殊符号
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 在Nuxt3中如何减少import model声明及初始化加载models快速开发秘诀(0个评论)
    • 在js的websocket客户端开发中遇到代码割裂情况解决方案(0个评论)
    • 在uni-app中使用Ucharts柱状图地步横向滚动条无法滑动解决方式(0个评论)
    • 在vue中实现移动端双指放大或缩小功能代码示例(0个评论)
    • jq中实现图片压缩、base64转成file后上传至服务器示例(0个评论)
    • 近期文章
    • 在Nuxt3中如何减少import model声明及初始化加载models快速开发秘诀(0个评论)
    • 适用于 Laravel 的表单请求测试程序包(0个评论)
    • Laravel 10.25版本发布(0个评论)
    • 在go语言中实现生成文件的校验和功能代码示例(0个评论)
    • Laravel 11版本抢先看,看将有什么新功能发布(0个评论)
    • goose数据库迁移工具介绍及使用流程步骤(0个评论)
    • 中国程序员“翻墙”为海外软件公司打工,105.8万工资被罚没!转知乎(0个评论)
    • 在go语言gin框架中使用Sharding(Gorm分表中间件)实现分表流程步骤(0个评论)
    • 在PHP提高性能方式之开启OPCache扩展及OPCache配置参数详解(0个评论)
    • 在js的websocket客户端开发中遇到代码割裂情况解决方案(0个评论)
    • 近期评论
    • 路人 在

      php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..
    • 博主 在

      科学上网翻墙之v2rayN-Core客户端免费公益节点使用教程中评论 @ mashrdn 多切换几个节点测试,免费ssr是没那么稳..
    • mashrdn 在

      科学上网翻墙之v2rayN-Core客户端免费公益节点使用教程中评论 V2rayn免费节点添加上去了,youtobe无法打开网页,是怎么回事..
    • 张伟 在

      科学上网翻墙之v2rayN-Core客户端免费公益节点使用教程中评论 3q!有用,不过免费节点隔天就要去git上复制新的导进去..
    • 博主 在

      科学上网翻墙访问Google , 上外网神器佛跳墙VPN(永久免费)使用流程步骤中评论 该篇教程已不能用了,告知大家,免的老有老铁问我!..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客