获取富文本编辑器的纯文本内容

发布新闻等信息时，必然会用到富文本编辑器。然而我们在前端页面展示的时候，可能需要把内容文字提取出来，作为简介使用；又或者把图片提取一张作为封面图片使用。
解决方案；

1 提取文本或者封面图片存入数据库中

(1)在前端处理文字传给后台

这里我使用的是kindeditor编辑器，方法如下：

var text = editor.text();

alert这个值会发现，图片没有被处理掉，所以用js手动再次处理，方法如下：

  function repalceHtml(str){str = str.replace(/<[^>]+>|&[^>]+;/g,"").trim();//去掉所有的html标签和&nbsp;之类的特殊符合return str;}text = repalceHtml(text);

把这个text传入后台即可。

(2)在Java端处理，前端不用处理

后台拿到内容之后，是一段html字符串，因此需要截取一下
截取文字方法如下：

 public static String getHtmlText(String strHtml) { String txtcontent = strHtml.replaceAll("</?[^>]+>", ""); //剔出<html>的标签 txtcontent = txtcontent.replaceAll("<a>\\s*|\t|\r|\n|&nbsp;|</a>", "");//去除字符串中的空格,回车,换行符,制表符 return txtcontent; }

截取图片src方法如下：

public static List<String> getImageSrc(String htmlStr) {List<String> pics = new ArrayList<String>();String img = "";String a = "";Pattern p_image;Matcher m_image;//String regEx_img = "<img.*src=(.*?)[^>]*?>"; //图片链接地址String regEx_img = "<img.*src\\s*=\\s*(.*?)[^>]*?>";p_image = Pattern.compile(regEx_img, Pattern.CASE_INSENSITIVE);m_image = p_image.matcher(htmlStr);while (m_image.find()) {// 得到<img />数据img = m_image.group();// 匹配<img>中的src数据Matcher m = Pattern.compile("src\\s*=\\s*\"?(.*?)(\"|>|\\s+)").matcher(img);while (m.find()) {pics.add(m.group(1));}}return pics;
}

调用方法：

if(!StringUtils.isEmpty(validationIndicators.getContents())){//处理图片List<String> list = GetSrcUtils.getImageSrc(validationIndicators.getContents());if(list!=null&&list.size()>0){validationIndicators.setImg(list.get(0));}//处理文字String text = GetHtmlTextUtils.getHtmlText(validationIndicators.getContents());validationIndicators.setZy(text);
}

2.展示页面的时候，直接在前端处理

前端拿到json字符串之后，遍历的时候，手动处理一下，依赖的依然是同一个js方法。

  function repalceHtml(str){str = str.replace(/<[^>]+>|&[^>]+;/g,"").trim();//去掉所有的html标签和&nbsp;之类的特殊符合return str;}text = repalceHtml(text);

获取富文本编辑器的纯文本内容相关推荐

微信小程序解析并展示富文本编辑器保存后的内容
最近有个产品需求:在PC端里用富文本编辑器里编写自定义内容,然后保存后需要在小程序端展示,了解过的朋友就知道了,富文本编辑器输出的内容都是基于HTML标签的,比如:div.p.br这些常用的,而小程序 ...
js把vue转化html,将 vue.js 获取的 html 文本转化为纯文本
我存入数据表中的数据是使用 html 格式,获取数据是使用 vue 获取. 遇到了一个问题,就是界面上显示的数据是 html 格式的,但是我需要它显示纯文本. 怎么做呢?首先在 js 中写一个将 ...
从html富文本中提取纯文本
其实从html富文本中提取纯文本很简单,富文本基本上是使用html标签给文本加上丰富多彩的样式. 所以只需要将富文本字符串中的"<.....>"标签剔除,即可得到纯文本 ...
富文本编辑器禁止改变文本内容
最近做一个项目,用的是quill-editor编辑器,实现的效果是可以编辑样式,不能改变文本内容,百度了很多,都是连工具栏也禁用了,后来检查元素,看html原生代码,发现有一个contentEdita ...
php html 纯文本,php – 使用纯文本回退发送HTML简报
我目前正在使用一个脚本,该脚本使用file_get_contents来获取php文件的内容,然后将其通过电子邮件发送到客户列表中.我想改变脚本以允许纯文本回退以降低被标记为垃圾邮件的风险. 这是我目前 ...
php请求纯文本,php – 使用纯文本回退发送HTML简报
我目前正在使用一个脚本,该脚本使用file_get_contents来获取php文件的内容,然后将其通过电子邮件发送到客户列表中.我想改变脚本以允许纯文本回退以降低被标记为垃圾邮件的风险. 这是我目前 ...
Java实现从Html文本中提取纯文本
1.应用场景:从一份html文件中或从String(是html内容)中提取纯文本,去掉网页标签: 2.代码一:replaceAll搞定 //从html中提取纯文本public static Strin ...
python实现文本编辑器_Python实现文本编辑器功能实例详解
这篇文章主要介绍了Python实现的文本编辑器功能,结合实例形式详细分析了基于wxpython实现文本编辑器所需的功能及相关实现技巧,需要的朋友可以参考下本文实例讲述了Python实现的文本编辑器功 ...
Linux常用文本编辑器，及文本查看摘选的常用命令
Linux常用文本编辑器: Emacs:功能强大,门槛高,对新手不友好. nano :优点是操作简单,缺点是无强大的命令支持复杂操作. gedit :只能在有gnome的换图形化界面中使用 kedit ...