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 相关文章推荐
Wordpress ThickBox 点击图片显示下一张图的修改方法
Dec 11 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Aug 12 Javascript
js判断ie版本号的简单实现代码
Mar 05 Javascript
简单谈谈json跨域
Mar 13 Javascript
即将发布的jQuery 3 有哪些新特性
Apr 14 Javascript
jquery中用jsonp实现搜索框功能
Oct 18 Javascript
JS动态给对象添加属性和值的实现方法
Oct 21 Javascript
Bootstrap基本组件学习笔记之面板(14)
Dec 08 Javascript
jQuery树控件zTree使用方法详解(一)
Feb 28 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
Jun 15 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
在JavaScript中实现链式调用的实现
Dec 24 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
第1次亲密接触PHP5(1)
2006/10/09 PHP
php 读取shell管道传输过来的内容
2010/03/01 PHP
解析用PHP实现var_export的详细介绍
2013/06/20 PHP
PHP生成自适应大小的缩略图类及使用方法分享
2014/05/06 PHP
ThinkPHP实现批量删除数据的代码实例
2014/07/02 PHP
php接口数据加密、解密、验证签名
2015/03/12 PHP
Yii框架表单提交验证功能分析
2017/01/07 PHP
php无限级分类实现评论及回复功能
2019/02/18 PHP
php redis setnx分布式锁简单原理解析
2020/10/23 PHP
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
2017/02/14 Javascript
vue-router路由懒加载和权限控制详解
2017/12/13 Javascript
Bootstrap实现的表格合并单元格示例
2018/02/06 Javascript
浅谈webpack 自动刷新与解析
2018/04/09 Javascript
vue js秒转天数小时分钟秒的实例代码
2018/08/08 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
2018/11/30 Javascript
Node.js 的 GC 机制详解
2019/06/03 Javascript
小程序实现日历左右滑动效果
2019/10/21 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
[01:04:02]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第二场 1月24日
2021/03/11 DOTA
python实现从一组颜色中找出与给定颜色最接近颜色的方法
2015/03/19 Python
python下载文件时显示下载进度的方法
2015/04/02 Python
进一步探究Python的装饰器的运用
2015/05/05 Python
Python实现随机选择元素功能
2017/09/14 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
python利用Excel读取和存储测试数据完成接口自动化教程
2020/04/30 Python
python3从网络摄像机解析mjpeg http流的示例
2020/11/13 Python
台湾专柜女包:KINAZ
2019/12/26 全球购物
阿迪达斯印尼官方网站:adidas印尼
2020/02/10 全球购物
澳大利亚厨房和家用电器购物网站:Bing Lee
2021/01/11 全球购物
副总经理工作职责
2013/11/28 职场文书
支部书记四风问题对照检查材料
2014/10/04 职场文书
群众路线表态发言材料
2014/10/17 职场文书
政风行风整改报告
2014/11/06 职场文书
2015年防汛工作总结
2015/05/15 职场文书
因个人工作失误检讨书
2019/06/21 职场文书