发布新闻等信息时,必然会用到富文本编辑器。然而我们在前端页面展示的时候,可能需要把内容文字提取出来,作为简介使用;又或者把图片提取一张作为封面图片使用。
解决方案;
1 提取文本或者封面图片存入数据库中
(1)在前端处理文字传给后台
这里我使用的是kindeditor编辑器,方法如下:
var text = editor.text();
alert这个值会发现,图片没有被处理掉,所以用js手动再次处理,方法如下:
function repalceHtml(str){str = str.replace(/<[^>]+>|&[^>]+;/g,"").trim();//去掉所有的html标签和 之类的特殊符合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| |</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 = pile(regEx_img, Pattern.CASE_INSENSITIVE);m_image = p_image.matcher(htmlStr);while (m_image.find()) {// 得到<img />数据img = m_image.group();// 匹配<img>中的src数据Matcher m = pile("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标签和 之类的特殊符合return str;}text = repalceHtml(text);