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 简短几句代码实现给元素动态添加及获取提示信息
Sep 01 Javascript
JQuery实现鼠标移动到图片上显示边框效果
Jan 09 Javascript
js 获取元素下面所有li的两种方法
Apr 14 Javascript
jquery实现图片按比例缩放示例
Jul 01 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
Jul 29 Javascript
JS使用parseInt解析数字实现求和的方法
Aug 05 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
Oct 10 Javascript
jQuery实现页面顶部下拉广告
Dec 30 Javascript
解决layui富文本编辑器图片上传无法回显的问题
Sep 18 Javascript
vue解决使用$http获取数据时报错的问题
Oct 30 Javascript
小程序wx.getUserProfile接口的具体使用
Jun 02 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
拼音码表的生成
2006/10/09 PHP
php 函数中使用static的说明
2012/06/01 PHP
php实现文件编码批量转换
2014/03/10 PHP
php实现可用于mysql,mssql,pg数据库操作类
2014/12/13 PHP
php动态变量定义及使用
2015/06/10 PHP
laravel 模型查询按照whereIn排序的示例
2019/10/16 PHP
jQuery ready函数滥用分析
2011/02/16 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
2012/02/27 Javascript
JQuery入门—编写一个简单的JQuery应用案例
2013/01/03 Javascript
node.js中的fs.symlink方法使用说明
2014/12/15 Javascript
jQuery插件开发的五种形态小结
2015/03/04 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
js正则表达式replace替换变量方法
2016/05/21 Javascript
vue2滚动条加载更多数据实现代码
2017/01/10 Javascript
label+input实现按钮开关切换效果的实例
2017/08/16 Javascript
微信小程序 授权登录详解(附完整源码)
2019/08/23 Javascript
Vue+Element实现网页版个人简历系统(推荐)
2019/12/31 Javascript
[05:42]DOTA2英雄梦之声_第10期_蝙蝠骑士
2014/06/21 DOTA
python人人网登录应用实例
2014/09/26 Python
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
Python中Proxypool库的安装与配置
2018/10/19 Python
解决Python下imread,imwrite不支持中文的问题
2018/12/05 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
Python 分享10个PyCharm技巧
2019/07/13 Python
详解Django配置优化方法
2019/11/18 Python
Pytorch之parameters的使用
2019/12/31 Python
西班牙著名的珠宝首饰品牌:P D PAOLA
2018/09/15 全球购物
大学生职业生涯规划书范文
2014/01/14 职场文书
我的中国梦口号
2014/06/16 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
大学辅导员述职报告
2015/01/10 职场文书
标会主持词应该怎么写?
2019/08/15 职场文书
AI:如何训练机器学习的模型
2021/04/16 Python
python办公自动化之excel的操作
2021/05/23 Python
解决Swagger2返回map复杂结构不能解析的问题
2021/07/02 Java/Android