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 相关文章推荐
IE6,IE7下js动态加载图片不显示错误
Jul 17 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
Mar 18 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
May 27 Javascript
jquery模拟SELECT下拉框取值效果
Oct 23 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
Dec 26 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
Jun 05 Javascript
AngularJS 过滤与排序详解及实例代码
Sep 14 Javascript
Javascript 实现计算器时间功能详解及实例(二)
Jan 08 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
Jan 20 Javascript
Node.js中DNS模块学习总结
Feb 28 Javascript
js replace 全局替换的操作方法
Jun 12 Javascript
js限制输入框只能输入数字(onkeyup触发)
Sep 28 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
如何设置mysql允许外网访问
2013/06/04 PHP
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
ThinkPHP之foreach标签使用概述
2014/06/30 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
PHP笛卡尔积实现算法示例
2018/07/30 PHP
IE和Firefox下javascript的兼容写法小结
2008/12/10 Javascript
js中将URL中的参数提取出来作为对象的实现代码
2011/08/16 Javascript
页面载入结束自动调用js函数示例
2013/09/23 Javascript
jQuery分组选择器用法实例
2014/12/23 Javascript
javascript 将共享属性迁移到原型中去的实现方法
2016/08/31 Javascript
vue自动化表单实例分析
2018/05/06 Javascript
在vue中使用vue-echarts-v3的实例代码
2018/09/13 Javascript
js如何获取访问IP、地区、当前操作浏览器
2019/07/23 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
2019/08/23 Javascript
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
JQuery表单元素取值赋值方法总结
2020/05/12 jQuery
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
tensorflow TFRecords文件的生成和读取的方法
2018/02/06 Python
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
分析运行中的 Python 进程详细解析
2019/06/22 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
Python实现井字棋小游戏
2020/03/09 Python
python+selenium+chromedriver实现爬虫示例代码
2020/04/10 Python
财务管理专业应届毕业生求职信
2013/09/22 职场文书
销售经理工作职责范文
2013/12/03 职场文书
付款委托书范本
2014/04/04 职场文书
母亲节演讲稿
2014/05/27 职场文书
争先创优演讲稿
2014/09/15 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
2019年健身俱乐部的创业计划书
2019/08/26 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript
python中的被动信息搜集
2021/04/29 Python
python 制作一个gui界面的翻译工具
2021/05/14 Python
MySQL创建定时任务
2022/01/22 MySQL