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实现视频作为全屏幕背景
Dec 18 Javascript
JavaScript实现更改网页背景与字体颜色的方法
Feb 02 Javascript
js实现仿QQ秀换装效果的方法
Mar 04 Javascript
jQuery随机密码生成的方法
Mar 09 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
Sep 06 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
vue实现app页面切换动画效果实例
May 23 Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
Nov 09 Javascript
微信小程序switch开关选择器使用详解
Jan 31 Javascript
JS添加或删除HTML dom元素的方法实例分析
Mar 05 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
使用 eAccelerator加速PHP代码的方法
2007/09/30 PHP
Thinkphp事务操作实例(推荐)
2017/04/01 PHP
phpMyAdmin通过密码漏洞留后门文件
2018/11/20 PHP
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
js中复制行和删除行的操作实例
2013/06/25 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
jquery中添加属性和删除属性
2015/06/03 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
JavaScript面向对象分层思维全面解析
2016/11/22 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
2017/05/31 Javascript
vuejs使用递归组件实现树形目录的方法
2017/09/30 Javascript
bootstrap日期插件daterangepicker使用详解
2017/10/19 Javascript
JS+CSS实现网页加载中的动画效果
2017/10/27 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
2018/09/01 Javascript
vue+elementUI 实现内容区域高度自适应的示例
2020/09/26 Javascript
Python3控制路由器——使用requests重启极路由.py
2016/05/11 Python
Python爬虫爬取一个网页上的图片地址实例代码
2018/01/16 Python
浅谈python新式类和旧式类区别
2019/04/26 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
解决pycharm安装第三方库失败的问题
2020/05/09 Python
Python3爬虫关于识别点触点选验证码的实例讲解
2020/07/30 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
详解使用CSS3的@media来编写响应式的页面
2017/11/01 HTML / CSS
使用Html5中的cavas画一面国旗
2019/09/25 HTML / CSS
canvas画图被放大且模糊的解决方法
2020/08/11 HTML / CSS
HolidayLettings英国:预订最好的度假公寓、别墅和自助式住宿
2019/08/27 全球购物
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
分公司经理岗位职责
2013/11/11 职场文书
美发店5.1活动方案
2014/01/24 职场文书
能源工程专业应届生求职信
2014/03/01 职场文书
电气工程自动化求职信
2014/03/14 职场文书
就业意向书范文
2014/04/01 职场文书
机械专业毕业生自我鉴定2014
2014/10/04 职场文书
中秋客户感谢信
2015/01/22 职场文书