无为清净楼资源网 Design By www.qnjia.com

js正则表达式替换HTML标签以及空格( )

js代码:

function filter(text) {
  var reg = /<[^<>]+>/g;//1、全局匹配g肯定忘记写,2、<>标签中不能包含标签实现过滤HTML标签
  text = text.replace(reg, '');//替换HTML标签
  text = text.replace(/&nbsp;/ig, '');//替换HTML空格
  return text;
  };

在angularJS中使用过滤器过滤富文本数据

app.filter('qxhtml', function () {
  return function (text) {
   var reg = /<[^<>]+>/g;
   text = text.replace(reg, '');
   text = text.replace(/&nbsp;/ig, '');
   if (text.length > 50) {
    text = text.substring(0, 50) + "...";
   }
   return text;
  };
 });

使用过滤器

<div class="desc">
{{y.Description| qxhtml}}
</div>

下面是其他网友的补充

js如何使用正则表达式实现过滤HTML标签?(/<[^<>]+>/g)

一、总结(点击显示或隐藏总结内容)

js进阶正则表达式实现过滤HTML标签(<>标签中不能包含标签实现过滤HTML标签:/<[^<>]+>/g)

var reg=/<[^<>]+>/g

1、全局匹配g肯定不能忘记写
2、<>标签中不能包含标签实现过滤HTML标签

二、js进阶正则表达式实现过滤HTML标签

实例描述:将一段带有HTML标签的文本的HTML标签过滤掉,转化为纯文本输出

三、代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>过滤HTML标签</title>
 <style type="text/css">
  textarea{
   width: 60%;
   font-size: 18px;
   background: rgba(100,200,50,0.3);
  }
  #text2{
   background:rgba(200,100,50,0.3); 
  }
 </style>
</head>
<body>
 <textarea id="text1" rows="10" cols="50"></textarea><br><br>
 <input type="button" id="btn1" value="过滤HTML标签"><br><br>
 <textarea id="text2" rows="10" cols="50"></textarea>
 <script type="text/javascript">
  var btn1=document.getElementById('btn1')
  var text1=document.getElementById('text1')
  var text2=document.getElementById('text2')
  btn1.onclick=function (){
   //var reg=/<.+>/g
   var reg=/<[^<>]+>/g //1、全局匹配g肯定忘记写 2、<>标签中不能包含标签实现过滤HTML标签
   text2.value=text1.value.replace(reg,'')
  }
 </script>
</body>
</html>

js 正则表达式去除html字符中所有的标签(img标签除外)

废话不多说,直接上代码:

description.replace(/<("");

如果保留img,p标签,则为:

description.replace(/<("");

在js中/需要用转义字符。

通用 HTML 标签区配正则

最近看网站日志,发现有人在博客上转了我不知道几年前写的一个匹配 HTML 标签的正则,刚好最近也在做一些相关的事情,顿时来了兴趣。就拿回来改改,成了下面这样,可能会有一些 case 遗漏,欢迎修改,已知在内嵌 <script> 复杂内容的处理能力较弱,不过对纯 HTML 来说已经够用,拿来做一些分析工具还是不错滴。

<script type="text/javascript"> 
var str = "<br /><br/><br><br ><中文><div><div id=a>无忧脚本<img src=\"http://bbs.51js.com/images/default/logo.gif\" width=\"191\" height='75' border=0 onload=\"if(testver>0 && testver<500)alert('test');\" \n onerror='alert(\"test\")' /><img src=xxx alt=\"hello\njust a test!\"></div><hr ><script type=\"test/javascript\" defer>alert(\"just a test!\");<\/script>Hello.<input type=text value=\"无忧脚本\"><br / ><img \"\" ></ ><!-- 注释 -->< ucren><!-- 再<注>释 --><img alt=' title='\"' /><b>123</b>1<2<3,3<4>1&lt;b&gt;<img src=\"http://bbs.51js.com/images/old51js/logo.gif\" /><!-- 三注释> -->"; 
var reg = /<("]"\n----------------------------------------------------\n")); 
</script> 

在线测试


[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

有朋友留言说Java直接使用的话会报错。我后来查了一下,发现Java正则引擎支持的特性相对比较少。在1.6版本中不能使用命名组(貌似1.7的时候开始支持了),否则会报以下错误,更别说平衡组了。因此感觉要实现无限级的嵌套匹配不大现实。

java.util.regex.PatternSyntaxException: Look-behind group does not have an obvious maximum length near index XX

在网上搜了好久也没找到完美的解决方案。不过,我们可以实现有限级Html嵌套标签匹配。思路相对于无限级来说就简单了好多,不需要那么多高级的特性。
示例:

<div id='container'><BR> <div style='background-color:gray;' id='footer'><BR> <a id='gotop' href='#' onclick='MGJS.goTop();return false;'>Top</a><BR> <a id='powered' href='http://wordpress.org/'>WordPress</a><BR> <div id='copyright'><BR> Copyright &copy; 2009 简单生活 —— Kevin Yang的博客<BR> </div><BR> <div id='themeinfo'><BR> Theme by <a href='http://www.neoease.com/'>mg12</a>. Valid <a href='http://validator.w3.org/check"htmlcode">

<table boder="0" width="11%" class="somestory">
<tr>
<td width="100%">
<p align="center">其它内容...</p>
</td>
</tr>
</table>
<table border="0" width="11%" class="headline">
<tr>
<td width="100%">
<p align="center">典经HTML正则表达式!</p>
</td>
</tr>
</table>
<table boder="0" width="11%" class="someotherstory">
<tr>
<td width="100%">
<p align="center">其它内容...</p>
</td>
</tr>
</table>

正则表过式:<table.*("htmlcode">

<table boder="0" width="11%" class="somestory">
<tr>
<td width="100%">
<p align="center">其它内容...</p>
</td>
</tr>
</table>
<table border="0" width="11%" class="headline">
<tr>
<td width="100%">
<p align="center">典经HTML正则表达式!</p>
</td>
</tr>
</table>
<table boder="0" width="11%" class="someotherstory">
<tr>
<td width="100%">
<p align="center">其它内容...</p>
</td>
</tr>
</table>

正则表达式:<table.*("0" width="11%" class=" 开始, 以</table>结束的字符串,就是以上以红色标示出来的部分。

原理:

<table.*("zood" 或 "food" 匹配
*"*" 匹配 0 个到多个任意字符,而“?”使得“*”匹配范围最小化,即在找到表达式的下一部分之前匹配尽可能少的字符。</table> 是表格的结束标记.

 例3.

<tableboder="0" width="11%" class="somestory">
<tr>
<td width="100%">
<p align="center">其它内容...</p>
</td>
</tr>
</table>
<tableborder="0" width="11%" class="headline">
<tr>
<td width="100%">
<p align="center">典经HTML正则表达式!</p>
</td>
</tr>
</table>
<tableboder="0" width="11%" class="someotherstory">
<tr>
<td width="100%">
<p align="center">其它内容...</p>
</td>
</tr>
</table>

正则表达式:<("zood" 或 "food" 匹配.
*"*" 匹配 0 个到多个任意字符,而“?”使得“*”匹配范围最小化,即在找到表达式的下一部分之前匹配尽可能少的字符。

本例使用了分组命名及反向引用命名组的概念。

正则表达匹配中文

匹配中文字符的正则表达式:   [\u4e00-\u9fa5]
1、先用js把中文转换16进制码:d.innerHTML = escape("你们"); 得到 %u4F60%u4EEC, 即 \u4F60\u4EEC
2、var arr = str.match(/\u4F60\u4EEC/g);
3、\u4F60为单个汉字“你”.
4、以上测试程序为javascript

标签:
正则表达式,Html标签

无为清净楼资源网 Design By www.qnjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com