JavaScript正则替换HTML标签功能示例


Posted in Javascript onMarch 02, 2017

本文实例讲述了JavaScript正则替换HTML标签功能。分享给大家供大家参考,具体如下:

1、说明

获取HTML字符串(包含标签),通过正则表达式替换HTML标签,输出替换后的字符串

2、实现JavaScript代码

function deleteTag()
{
  var regx = /<[^>]*>|<\/[^>]*>/gm;
  var tagStr = $("#ul_li").html();
  alert("替换之前的字符串:" + tagStr);
  var result = tagStr.replace(regx,"");
  alert("替换之后的字符串:" + result);
}

3、运行结果

(1)初始化时

JavaScript正则替换HTML标签功能示例

(2)单击按钮后

JavaScript正则替换HTML标签功能示例

(3)单击“确定”后

JavaScript正则替换HTML标签功能示例

4、完整实例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>JavaScript替换HTML标签</title>
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="This is my page">
  <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
  <script type="text/javascript">
    function deleteTag()
    {
      var regx = /<[^>]*>|<\/[^>]*>/gm;
      var tagStr = $("#ul_li").html();
      alert("替换之前的字符串:" + tagStr);
      var result = tagStr.replace(regx,"");
      alert("替换之后的字符串:" + result);
    }
  </script>
 </head>
 <body>
   <ul id="ul_li">
    <li class="peach">桃树</li>
    <li class="pear">梨树</li>
    <li>樟树</li>
    <li>枫树</li>
    <li>松树</li>
   </ul>
   <input type="button" value="替换HTML标签" onclick="deleteTag()"/>
 </body>
</html>
Javascript 相关文章推荐
用Javascript同时提交多个Web表单的方法
Dec 26 Javascript
预加载css或javascript的js代码
Apr 23 Javascript
js 中{},[]中括号,大括号使用详解
May 12 Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
Mar 26 Javascript
使用Js让Html中特殊字符不被转义
Nov 05 Javascript
JavaScript几种数组去掉重复值的方法推荐
Apr 12 Javascript
jquery插件格式实例分析
Jun 16 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
Sep 19 Javascript
深入理解js 中async 函数的含义和用法
May 13 Javascript
cnpm加速Angular项目创建的方法
Sep 07 Javascript
微信小程序入口场景的问题集合与相关解决方法
Jun 26 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
Aug 10 Javascript
如何正确理解javascript的模块化
Mar 02 #Javascript
jquery实现左右滑动式轮播图
Mar 02 #Javascript
如何写好你的JavaScript【推荐】
Mar 02 #Javascript
js前端日历控件(悬浮、拖拽、自由变形)
Mar 02 #Javascript
JS操作input标签属性checkbox全选的实现代码
Mar 02 #Javascript
JavaScript正则获取地址栏中参数的方法
Mar 02 #Javascript
原生js仿浏览器滚动条效果
Mar 02 #Javascript
You might like
php初始化对象和析构函数的简单实例
2014/03/11 PHP
ThinkPHP中的create方法与自动令牌验证实例教程
2014/08/22 PHP
详解php中空字符串和0之间的关系
2016/10/23 PHP
Javascript技术技巧大全(五)
2007/01/22 Javascript
原型方法的不同写法居然会影响调试的解决方法
2007/03/08 Javascript
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
2010/04/15 Javascript
div+css布局的图片连续滚动js实现代码
2010/05/04 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
基于javascript代码实现通过点击图片显示原图片
2015/11/29 Javascript
理解jquery事件冒泡
2016/01/03 Javascript
javascript实现粘贴qq截图功能(clipboardData)
2016/05/29 Javascript
JS html时钟制作代码分享
2017/03/03 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
2017/04/11 Javascript
Bootstrap实现各种进度条样式详解
2017/04/13 Javascript
JS实现图片点击后出现模态框效果
2017/05/03 Javascript
mui框架 页面无法滚动的解决方法(推荐)
2018/01/25 Javascript
微信小程序实现YDUI的ScrollNav组件
2018/02/02 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
jQuery解析json格式数据示例
2018/09/01 jQuery
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
Django发送邮件和itsdangerous模块的配合使用解析
2019/08/10 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
浅谈CSS3特性查询(Feature Query: @supports)功能简介
2017/07/31 HTML / CSS
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
一套SQL笔试题
2016/08/14 面试题
用C#语言写出与SQLSERVER访问时的具体过程
2013/04/16 面试题
《玩具柜台前的孩子》教学反思
2014/02/13 职场文书
党的群众路线教育实践活动宣传方案
2014/02/23 职场文书
《花瓣飘香》教学反思
2014/04/15 职场文书
汉语言文学毕业求职信
2014/07/17 职场文书
2014年社区矫正工作总结
2014/11/18 职场文书
公司保洁员管理制度
2015/08/04 职场文书
工作简历的自我评价
2019/05/16 职场文书
mybatis调用sqlserver存储过程返回结果集的方法
2021/05/08 SQL Server
Python中Matplotlib的点、线形状、颜色以及绘制散点图
2022/04/07 Python