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代码
Dec 01 Javascript
js页面跳转常用的几种方式
Nov 25 Javascript
javascript中的parseInt和parseFloat区别
Jul 12 Javascript
jquery JSON的解析方式示例介绍
Jul 27 Javascript
JS实现超简单的鼠标拖动效果
Nov 02 Javascript
AngularJS实现动态编译添加到dom中的方法
Nov 04 Javascript
javascript实现无法关闭的弹框
Nov 27 Javascript
vue.js与后台数据交互的实例讲解
Aug 08 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
Sep 11 Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 Javascript
详细分析vue响应式原理
Jun 22 Javascript
小程序实现密码输入框
Nov 16 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使用curl制作简易百度搜索
2016/11/03 PHP
Javascript实例教程(19) 使用HoTMetal(1)
2006/12/23 Javascript
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
javascript suggest效果 自动完成实现代码分享
2012/02/17 Javascript
javascript时间函数基础介绍
2013/03/28 Javascript
jQuery函数map()和each()介绍及异同点分析
2014/11/08 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
2015/07/27 Javascript
Bootstrap CSS布局之表格
2016/12/17 Javascript
Bootstrap源码解读排版(1)
2016/12/23 Javascript
微信小程序之数据缓存的实例详解
2017/09/29 Javascript
轻松理解vue的双向数据绑定问题
2017/10/30 Javascript
jquery应用实例分享_实现手风琴特效
2018/02/01 jQuery
vue+element-ui+ajax实现一个表格的实例
2018/03/09 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
详解写好JS条件语句的5条守则
2019/02/28 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
2020/04/10 Javascript
JavaScript array常用方法代码实例详解
2020/09/02 Javascript
一篇文章看懂JavaScript中的回调
2021/01/05 Javascript
Python安装使用命令行交互模块pexpect的基础教程
2016/05/12 Python
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
使用Python实现租车计费系统的两种方法
2018/09/29 Python
selenium3+python3环境搭建教程图解
2018/12/07 Python
Django实现分页显示效果
2019/10/31 Python
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
超市5.1促销活动
2014/01/15 职场文书
工会主席事迹材料
2014/06/03 职场文书
2015年前台个人工作总结
2015/04/03 职场文书
餐饮服务食品安全承诺书
2015/04/29 职场文书
团支部书记竞选稿
2015/11/21 职场文书
小学思想品德教学反思
2016/02/24 职场文书
为什么 Nginx 比 Apache 更牛逼
2021/03/31 Servers
python图像处理基本操作总结(PIL库、Matplotlib及Numpy)
2021/06/08 Python
python开发人人对战的五子棋小游戏
2022/05/02 Python
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android