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

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

从数据库拿出的转义后的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];});
}

js处理富文本编辑器转义、去除转义、去除HTML标签的更多相关文章

  1. draft.js开发富文本编辑器

    写在前头的话 在react中去寻找一个好用的富文本编辑器网上很少有推荐的,搜到的也只有一些个人不成熟的作品,慢慢发现网上比较推荐的一个东东叫做draft.js. 这个东西在网上可以找到的教程也是手指头 ...

  2. bbs项目引入富文本编辑器和处理xss攻击和文章预览

    一.富文本编辑上传文章和图片 富文本编辑器我们使用kindeditor,我们首先去官网下载,然后解压,放到我们的static的目录中 然后我们在html中这样使用富文本编辑器 <!DOCTYPE ...

  3. 本人亲测-百度富文本编辑器(无bug版本)

    再此我想说明一点,好多教程都是转载别人的,而且也不注明从哪里转载的.每次搜点资料的时候总是跟网上刷小视频的感觉一样.有些人就直接把别人的东西粘贴过来了,一点改动都没有. 废话不多说,直接上教程. (百 ...

  4. 富文本编辑器kindeditor的使用

    第一步:导入前端js文件 <!-- 富文本编辑器 --> <link rel="stylesheet" href="../plugins/kindedi ...

  5. django之百度Ueditor富文本编辑器后台集成

    Python3 + Django2.0 百度Ueditor 富文本编辑器的集成 百度富文本编辑器官网地址:http://fex.baidu.com/ueditor/ 疑问:为什么要二次集成? 答案:因 ...

  6. 【ThinkPHP学习】ThinkPHP自己主动转义存储富文本编辑器内容导致读取出错

    RT. ThinkPHP的conf文件里的Convention.php有一个配置选项 'DEFAULT_FILTER' => 'htmlspecialchars', // 默认參数过滤方法 用于 ...

  7. 富文本编辑器上传图片需要配置js,后台代码

    富文本编辑器上传图片需要配置js,后台代码

  8. 一款纯HTML+CSS+JS富文本编辑器-handyeditor

    官网:http://he.catfish-cms.com/ 修改版本(修改一些BUG和图片上传服务器 点击下载: handyeditor富文本编辑器.zip): 图片上传接口上传类型: Content ...

  9. JS编写自己的富文本编辑器

    富文本编辑器,网上有很多功能齐全种类丰富的如百度的Ueditor,简单适用型的如WangEditor等等.在经过一番挑选后,我发现都不适用现在的项目,然后决定自己造轮子玩玩.富文本编辑器中主要涉及到J ...

随机推荐

  1. password & Encryption

    password & Encryption cipher https://dev.tencent.com/login

  2. delphi数据库进行增加操作时,怎么判断插入的这个值是否已经存在?

    //增 procedure TForm1.btnAddClick(Sender: TObject); begin ADOQuery1.Close; ADOQuery1.SQL.Clear; ADOQu ...

  3. 51nod1254 最大子段和 V2 DP

    ---题面--- 题解: 表示今天做题一点都不顺.... 这题也是看了题解思路然后自己想转移的. 看的题解其实不是这道题,但是是这道题的加强版,因为那道题允许交换k对数. 因为我们选出的是连续的一段, ...

  4. oracle大数据匹配处理C#

    忙碌了几天写出来的oracle存储过程在作业中执行. 写的oracle存储过程如果有什么不好的地方大家指点指点. oracle存储过程其中使用到游标嵌套.if.if嵌套.数据插入表.select插入表 ...

  5. 手把手教你通过Eclipse工程配置调用JNI完全攻略

    本文地址:http://www.cnblogs.com/wavky/p/JNI.html 当你找到并鬼使神差地打开这个博文的时候,我敢肯定你已经知道什么是JNI,基本概念就不粘贴了. 百度出来的JNI ...

  6. Working with large data sets in MySQL

    What does working with large data sets in mySQL teach you ? Of course you have to learn a lot about ...

  7. spring4.3注解

     Spring4.3中引进了 {@GetMapping.@PostMapping.@PutMapping.@DeleteMapping.@PatchMapping},分别对应这个查询,插入,更新,删除 ...

  8. cloudera manager 5.3完整卸载脚本

    service cloudera-scm-agent stop service cloudera-scm-agent stop umount /var/run/cloudera-scm-agent/p ...

  9. html中音频和视频

    HTML5音频中的新元素标签 src:音频文件路径. autobuffer:设置是否在页面加载时自动缓冲音频. autoplay:设置音频是否自动播放. loop:设置音频是否要循环播放. contr ...

  10. C# 序列化原因 (转)

         1.什么是序列化 序列化是将对象状态转换为可保持或传输的格式的过程,在序列化过程中,对象的公共字段和私有字段以及类的名称(包括包含该类的程序集)都被转换为字节流,然后写入数据流.与序列化相对 ...