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 18 Javascript
再谈javascript图片预加载技术(详细演示)
Mar 12 Javascript
js下将字符串当函数执行的方法
Jul 13 Javascript
AngularJS的内置过滤器详解
May 14 Javascript
AngularJS中处理多个promise的方式
Feb 02 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
Dec 08 Javascript
原生js实现鼠标跟随效果
Feb 28 Javascript
angular使用post、get向后台传参的问题实例
May 27 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
Oct 26 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
Jun 28 Javascript
微信小程序自定义组件实现tabs选项卡功能
Jul 14 Javascript
vue-router为激活的路由设置样式操作
Jul 18 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
星际中的相关伤害
2020/03/04 星际争霸
PHP脚本的10个技巧(1)
2006/10/09 PHP
功能齐全的PHP发送邮件类代码附详细说明
2008/07/10 PHP
php 文章采集正则代码
2009/12/28 PHP
Codeigniter注册登录代码示例
2014/06/12 PHP
ThinkPHP连接数据库及主从数据库的设置教程
2014/08/22 PHP
php中Socket创建与监听实现方法
2015/01/05 PHP
JavaScript版代码高亮
2006/06/26 Javascript
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
2009/04/07 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
2016/06/08 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
2016/12/25 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
2017/03/08 Javascript
利用nvm管理多个版本的node.js与npm详解
2017/11/02 Javascript
关于jquery layui弹出层的使用方法
2018/04/21 jQuery
sortable+element 实现表格行拖拽的方法示例
2019/06/07 Javascript
解决layUI的页面显示不全的问题
2019/09/20 Javascript
js刷新页面location.reload()用法详解
2019/12/09 Javascript
Vertx基于EventBus发送接受自定义对象
2020/11/16 Javascript
[00:32]DOTA2上海特级锦标赛 Ehome战队宣传片
2016/03/03 DOTA
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python Matplotlib库入门指南
2015/05/18 Python
Python功能键的读取方法
2015/05/28 Python
Python时间戳使用和相互转换详解
2017/12/11 Python
python人民币小写转大写辅助工具
2018/06/20 Python
对PyQt5中树结构的实现方法详解
2019/06/17 Python
pyqt弹出新对话框,以及关闭对话框获取数据的实例
2019/06/18 Python
从列表或字典创建Pandas的DataFrame对象的方法
2019/07/06 Python
django项目中使用手机号登录的实例代码
2019/08/15 Python
浅谈Python协程
2020/06/17 Python
如何在windows下安装配置python工具Ulipad
2020/10/27 Python
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
给女朋友的道歉信
2014/01/10 职场文书
2016元旦晚会主持人开场白和结束语
2015/12/03 职场文书
Flutter Navigator 实现路由传递参数
2022/04/22 Java/Android