SSM博客实战(1)--正则表达式去除html标签

大部分博客网站的首页文章的内容都是截取了文章的一部分,然后点击“查看更多”才能看完整的文字。所以,截取字符串是必不可少的。 但是如果我们直接用 substring 截取,会出现很多问题。比如样式不会改变,加粗的,文字颜色都不会去掉。还有就是一个 html标签如<strong></strong>可能会被截成两段,导致后面的文字全部加粗之类的。这种情况绝不允许。 像下图的,首页文章列表中 部分文章颜色全部变红,截取不正当导致。 本文将介绍如何去除文章的 html 标签。

Java 实现

  1. import java.util.regex.Matcher;
  2. import java.util.regex.Pattern;
  3. public class Demo {
  4.     private static final String regEx_script = "<script[^>]*?>[\\s\\S]*?<\\/script>"// 定义script的正则表达式
  5.     private static final String regEx_style = "<style[^>]*?>[\\s\\S]*?<\\/style>"// 定义style的正则表达式
  6.     private static final String regEx_html = "<[^>]+>"// 定义HTML标签的正则表达式
  7.     private static final String regEx_space = "\\s*|\t|\r|\n";//定义空格回车换行符
  8.     /**
  9.      * @param htmlStr
  10.      * @return
  11.      *  删除Html标签
  12.      */
  13.     public static String delHTMLTag(String htmlStr) {
  14.         Pattern p_script = Pattern.compile(regEx_script, Pattern.CASE_INSENSITIVE);
  15.         Matcher m_script = p_script.matcher(htmlStr);
  16.         htmlStr = m_script.replaceAll(""); // 过滤script标签
  17.         Pattern p_style = Pattern.compile(regEx_style, Pattern.CASE_INSENSITIVE);
  18.         Matcher m_style = p_style.matcher(htmlStr);
  19.         htmlStr = m_style.replaceAll(""); // 过滤style标签
  20.         Pattern p_html = Pattern.compile(regEx_html, Pattern.CASE_INSENSITIVE);
  21.         Matcher m_html = p_html.matcher(htmlStr);
  22.         htmlStr = m_html.replaceAll(""); // 过滤html标签
  23.         Pattern p_space = Pattern.compile(regEx_space, Pattern.CASE_INSENSITIVE);
  24.         Matcher m_space = p_space.matcher(htmlStr);
  25.         htmlStr = m_space.replaceAll(""); // 过滤空格回车标签
  26.         return htmlStr.trim(); // 返回文本字符串
  27.     }
  28.     public static String getTextFromHtml(String htmlStr){
  29.         htmlStr = delHTMLTag(htmlStr);
  30.         htmlStr = htmlStr.replaceAll(" """);
  31.         htmlStr = htmlStr.substring(0,100);
  32.         return htmlStr;
  33.     }
  34.     public static void main(String[] args) {
  35.         String str = "ubuntu 安装 phpmyadmin  两种 (两者选一):\n" +
  36.             "<h4>1: apt-get 安装  然后使用 已有的虚拟主机目录建立软连接</h4>\n" +
  37.             "<div class=\"dp-highlighter\">\n" +
  38.             "<ol class=\"dp-xml\" start=\"1\">\n" +
  39.             " \t<li class=\"alt\">sudo  apt-get install  phpmyadmin</li>\n" +
  40.             " \t<li class=\"\">sudo  ln-s /usr/share/phpmyadmin/      /var/www/pma</li>\n" +
  41.             "</ol>\n" +
  42.             "</div>\n" +
  43.             "<h4>2:手动上传</h4>\n" +
  44.             "网上下载 phpmyadmin软件包,使用 filezilla 上传到 /var/www/pma (pma自己创建)\n" +
  45.             "\n" +
  46.             "使用 ip/pma 查看 phpmyadmin\n" +
  47.             "\n" +
  48.             "其实 还可以 考虑给phpmyadmin 配置虚拟主机\n" +
  49.             "\n" +
  50.             "接下来 配置MySQL的  remote access\n" +
  51.             "\n" +
  52.             "默认下 mysql只能是本机访问的 但是 如果我通过ip 远程 访问方式 就是 remote access      比如 我在其他机器上要使用navicate 访问  也属于 remote access\n" +
  53.             "\n" +
  54.             "但是 ubuntu中的mysql 默认是不允许的 所以要修改mysql的配置\n" +
  55.             "\n" +
  56.             "sudo vim /etc/mysql/my.cnf #修改     bind-address 白名单 取消掉\n" +
  57.             "\n" +
  58.             "<img src=\"http://img.blog.csdn.net/20140914221520765?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2FuZzc5NDY4NjcxNA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast\" alt=\"\" />\n" +
  59.             "<h4></h4>\n" +
  60.             "<h4>进入phpmyadmin</h4>\n" +
  61.             "查看 用户 添加一个用户 可以 用 公网的ip 访问:\n" +
  62.             "\n" +
  63.             "<img src=\"http://img.blog.csdn.net/20140914222446977?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2FuZzc5NDY4NjcxNA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast\" alt=\"\" />\n" +
  64.             "\n" +
  65.             "<img src=\"http://img.blog.csdn.net/20140914222456821?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2FuZzc5NDY4NjcxNA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast\" alt=\"\" />\n" +
  66.             "<h4>重启msyql</h4>\n" +
  67.             "<div class=\"dp-highlighter\">\n" +
  68.             "<ol class=\"dp-xml\" start=\"1\">\n" +
  69.             " \t<li class=\"alt\">sudo  service  mysql restart</li>\n" +
  70.             "</ol>\n" +
  71.             "</div>\n" +
  72.             "使用navicate测试远程登录:\n" +
  73.             "\n" +
  74.             "<img src=\"http://img.blog.csdn.net/20140914222659905?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2FuZzc5NDY4NjcxNA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast\" alt=\"\" />\n" +
  75.             "\n" +
  76.             "<img src=\"http://img.blog.csdn.net/20140914222803896?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2FuZzc5NDY4NjcxNA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast\" alt=\"\" />\n" +
  77.             "\n" +
  78.             "以上  远程登录 已经 完成\n" +
  79.             "\n" +
  80.             "&nbsp;\n" +
  81.             "\n" +
  82.             "更多文章\n" +
  83.             "\n" +
  84.             "<a href=\"http://liuyanzhao.com/2009.html\" target=\"_blank\" rel=\"noopener noreferrer\">ubuntu14.04 下 mysql 存储目录迁移</a>\n" +
  85.             "\n" +
  86.             "<a href=\"http://liuyanzhao.com/1978.html\" target=\"_blank\" rel=\"noopener noreferrer\">ubuntu14.04下配置apache虚拟主机</a>\n" +
  87.             "\n" +
  88.             "<a href=\"http://liuyanzhao.com/2447.html\" target=\"_blank\" rel=\"noopener noreferrer\">ubuntu14.04 安装phpmyadmin 和配置</a>\n" +
  89.             "\n" +
  90.             "&nbsp;\n" +
  91.             "\n" +
  92.             "&nbsp;\n" +
  93.             "\n" +
  94.             "本文地址:<a href=\"http://liuyanzhao.com/2447.html\" target=\"_blank\" rel=\"noopener noreferrer\">http://liuyanzhao.com/2447.html</a>\n" +
  95.             "\n" +
  96.             "转载请注明\n" +
  97.             "\n" +
  98.             "&nbsp;";
  99.         System.out.println(getTextFromHtml(str));
  100.     }
  101. }
 

JSP 实现

这里我们需要自定义标签 1、在WEB-INF 下新建一个 myTag.dtd 文件
  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <!DOCTYPE taglib
  3.         PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.2//EN"
  4.         "http://java.sun.com/dtd/web-jsptaglibrary_1_2.dtd">
  5. <taglib>
  6.     <tlib-version>1.0</tlib-version><!-- 代表标签库的版本号 -->
  7.     <jsp-version>1.2</jsp-version><!-- 代表jsp的版本 -->
  8.     <short-name>SimpleTag</short-name><!-- 你的标签库的简称 -->
  9.     <uri>http://liuyanzhao.com</uri><!-- 你标签库的引用uri -->
  10.     <tag>
  11.         <name>htmlFilter</name>
  12.         <tag-class>com.liuyanzhao.blog.util.others.HtmlFilterTag</tag-class>
  13.         <body-content>scriptless</body-content>
  14.     </tag>
  15. </taglib>
注意: <short-name> 和 <uri> 可以随便填 <tag>标签内的 <name> 和下面的类名一致,<tag-class>是类的地址,<body-content> 这里就填 scriptless好了,意思是标签体内可以放文本,jsp标签和其他任意标签   2、在对应位置新建 HtmlFilterTag.java
  1. package com.liuyanzhao.blog.util.others;
  2. /**
  3.  * Created by 言曌 on 2017/8/26.
  4.  */
  5.     import java.io.IOException;
  6.     import java.io.StringWriter;
  7.     import java.util.regex.Matcher;
  8.     import java.util.regex.Pattern;
  9.     import javax.servlet.jsp.JspException;
  10.     import javax.servlet.jsp.PageContext;
  11.     import javax.servlet.jsp.tagext.JspFragment;
  12.     import javax.servlet.jsp.tagext.SimpleTagSupport;
  13. public class HtmlFilterTag extends SimpleTagSupport {
  14.     private static final int subLength = 200//截取字符串长度
  15.     private static final String regEx_script = "<script[^>]*?>[\\s\\S]*?<\\/script>"// 定义script的正则表达式
  16.     private static final String regEx_style = "<style[^>]*?>[\\s\\S]*?<\\/style>"// 定义style的正则表达式
  17.     private static final String regEx_html = "<[^>]+>"// 定义HTML标签的正则表达式
  18.     private static final String regEx_space = "\\s*|\t|\r|\n";//定义空格回车换行符
  19.     public static String filter(String htmlStr) {
  20.         Pattern p_script = Pattern.compile(regEx_script, Pattern.CASE_INSENSITIVE);
  21.         Matcher m_script = p_script.matcher(htmlStr);
  22.         htmlStr = m_script.replaceAll(""); // 过滤script标签
  23.         Pattern p_style = Pattern.compile(regEx_style, Pattern.CASE_INSENSITIVE);
  24.         Matcher m_style = p_style.matcher(htmlStr);
  25.         htmlStr = m_style.replaceAll(""); // 过滤style标签
  26.         Pattern p_html = Pattern.compile(regEx_html, Pattern.CASE_INSENSITIVE);
  27.         Matcher m_html = p_html.matcher(htmlStr);
  28.         htmlStr = m_html.replaceAll(""); // 过滤html标签
  29.         Pattern p_space = Pattern.compile(regEx_space, Pattern.CASE_INSENSITIVE);
  30.         Matcher m_space = p_space.matcher(htmlStr);
  31.         htmlStr = m_space.replaceAll(""); // 过滤空格回车标签
  32.         return htmlStr.trim(); // 返回文本字符串
  33.     }
  34.     @Override
  35.     public void doTag() throws JspException, IOException {
  36.         StringWriter sw = new StringWriter();
  37.         JspFragment jf = this.getJspBody();
  38.         jf.invoke(sw);
  39.         String content = sw.getBuffer().toString();
  40.         content = filter(content);
  41.         content = content.replaceAll(" """);
  42.         int contentLength =content.length();
  43.         if(contentLength>subLength) {
  44.             content = content.substring(0,subLength);
  45.         } else {
  46.             content = content.substring(0,contentLength);
  47.         }
  48.         ((PageContext) this.getJspContext()).getOut().write(content);
  49.     }
  50. }
注意: 大家也可以按照自己的需求,修改上面的代码   3、在 jsp 里调用,以下是部分 jsp 代码
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.          pageEncoding="UTF-8"%>
  3. <%@ taglib uri="/WEB-INF/myTag.dtd" prefix="lyz"%>  
  4. <!DOCTYPE html>
  5. <html lang="zh-CN">
  6. <head>
  7.     <meta charset="utf-8">
  8. </head>
  9. <body>
  10.        <lyz:htmlFilter>  ${article.content} </lyz:htmlFilter>  
  11. </body>
  12. </html>
注意: 一定要引入 dtd 文件,注意你的路径,prefix 填你的标签前缀,比如我填的是 lyz,下面调用的话,前缀保持正确即可   4、最终效果如下     本文地址:https://liuyanzhao.com/6065.html

发表评论

目前评论:1