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 相关文章推荐
Js base64 加密解密介绍
Oct 11 Javascript
Javascript 构造函数详解
Oct 22 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
Mar 15 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
Jul 29 Javascript
javascript实现动态统计图开发实例
Nov 21 Javascript
jQuery each函数源码分析
May 25 Javascript
js实现字符全排列算法的简单方法
May 01 Javascript
Vue声明式渲染详解
May 17 Javascript
简单实现jQuery手风琴效果
Aug 18 jQuery
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
Jan 18 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
Aug 07 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
如何正确理解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 VS ASP
2006/10/09 PHP
php去除头尾空格的2种方法
2015/03/16 PHP
Yii2实现增删改查后留在当前页的方法详解
2017/01/13 PHP
破除网页鼠标右键被禁用的绝招大全
2006/12/27 Javascript
最常用的12种设计模式小结
2011/08/09 Javascript
javascript获得服务器端控件的ID的实现代码
2011/12/28 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
一个简单的瀑布流效果(主体形式自写)
2013/05/27 Javascript
js通过八个点 拖动改变div大小的实现方法
2014/03/05 Javascript
JavaScript随机生成信用卡卡号的方法
2015/04/07 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
2016/05/24 Javascript
ES6使用export和import实现模块化的方法
2018/09/10 Javascript
JavaScript栈和队列相关操作与实现方法详解
2018/12/07 Javascript
一秒学会微信小程序制作table表格
2019/02/14 Javascript
[01:09:20]NB vs NAVI Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
Python实现TCP协议下的端口映射功能的脚本程序示例
2016/06/14 Python
深入浅析Python的类
2018/06/22 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
使用Python实现批量ping操作方法
2020/05/06 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
Python实现验证码识别
2020/06/15 Python
佛罗里达州印第安河新鲜水果:Hale Groves
2017/02/20 全球购物
用C#语言写出在本地创建一个UDP接收端口的具体过程
2016/02/22 面试题
介绍一下Linux文件的记录形式
2013/09/29 面试题
小学生安全保证书
2014/02/01 职场文书
移风易俗倡议书
2014/04/15 职场文书
学雷锋活动总结报告
2014/06/26 职场文书
优秀共产党员演讲稿
2014/09/04 职场文书
科技活动周标语
2014/10/08 职场文书
上下班时间调整通知
2015/04/23 职场文书
2015年勤工助学工作总结
2015/04/29 职场文书
浅谈:电影《孔子》观后感(范文)
2019/10/14 职场文书
php随机生成验证码,php随机生成数字,php随机生成数字加字母!
2021/04/01 PHP
MySQL优化之如何写出高质量sql语句
2021/05/17 MySQL