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 相关文章推荐
jquery与google map api结合使用 控件,监听器
Mar 04 Javascript
JavaScript数据结构和算法之图和图算法
Feb 11 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
Oct 23 Javascript
js过滤HTML标签完整实例
Nov 26 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
Dec 31 Javascript
早该知道的7个JavaScript技巧
Jun 21 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
Oct 19 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
Feb 04 Javascript
原生js实现轮播图
Feb 27 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
Jul 25 Javascript
TypeScript中使用getElementXXX()的示例代码
Sep 12 Javascript
详解JavaScript类型判断的四种方法
Oct 21 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
2.PHP入门
2006/10/09 PHP
php ajax 静态分页过程形式
2011/09/02 PHP
php生成百度sitemap站点地图类函数实例
2014/10/17 PHP
PHP ajax+jQuery 实现批量删除功能实例代码小结
2018/12/06 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
2010/03/20 Javascript
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
js 判断文件类型并控制表单提交示例代码
2013/11/14 Javascript
浅谈jQuery中setInterval()方法
2015/07/07 Javascript
简单理解vue中Props属性
2016/10/27 Javascript
微信开发 js实现tabs选项卡效果
2016/10/28 Javascript
canvas实现探照灯效果
2017/02/07 Javascript
vue移动端UI框架实现QQ侧边菜单组件
2018/03/09 Javascript
python实现的解析crontab配置文件代码
2014/06/30 Python
Python命名空间详解
2014/08/18 Python
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
python写入中英文字符串到文件的方法
2015/05/06 Python
Python中的单继承与多继承实例分析
2018/05/10 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
pybind11和numpy进行交互的方法
2019/07/04 Python
python调用其他文件函数或类的示例
2019/07/16 Python
PIL图像处理模块paste方法简单使用详解
2019/07/17 Python
Pandas 重塑(stack)和轴向旋转(pivot)的实现
2019/07/22 Python
python如何构建mock接口服务
2021/01/28 Python
Lookfantastic日本官网:英国知名护肤、化妆品和头发护理购物网站
2018/04/21 全球购物
Eagle Eyes Optics鹰眼光学:高性能太阳镜
2018/12/07 全球购物
巴西儿童时尚购物网站:Dinda
2019/08/14 全球购物
美国在线家具网站:GDFStudio
2021/03/13 全球购物
幼儿园教师获奖感言
2014/03/11 职场文书
出国留学担保书
2014/05/20 职场文书
大学生党员个人剖析材料
2014/10/08 职场文书
先进典型事迹材料
2014/12/29 职场文书
实习协议书
2015/01/27 职场文书
党员自我评价范文2015
2015/03/03 职场文书
Javascript中Microtask和Macrotask鲜为人知的知识点
2022/04/02 Javascript