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

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

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("]+>", ""); //剔出的标签 
		txtcontent = txtcontent.replaceAll("\\s*|\t|\r|\n| |", "");//去除字符串中的空格,回车,换行符,制表符 
		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 = "]*?>"; //图片链接地址
       String regEx_img = "]*?>";
       p_image = Pattern.compile
               (regEx_img, Pattern.CASE_INSENSITIVE);
       m_image = p_image.matcher(htmlStr);
       while (m_image.find()) {
           // 得到数据
           img = m_image.group();
           // 匹配中的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标签和 之类的特殊符合
    return str;
    }
    text = repalceHtml(text);

你可能感兴趣的:(java,js)