编程 Javascript

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正则替换HTML标签功能示例

- Author -

翱翔天地

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Mootools 1.2教程 Fx.Tween的使用

Sep 15 Javascript

javascript下判断一个元素是否存在的代码

Mar 05 Javascript

JavaScript 原型继承之构造函数继承

Aug 26 Javascript

Javascript中string转date示例代码

Nov 01 Javascript

JavaScript实现向右伸出的多级网页菜单效果

Aug 25 Javascript

js获取客户端操作系统类型的方法【测试可用】

May 27 Javascript

bootstrap的常用组件和栅格式布局详解

May 02 Javascript

ES6入门教程之let和const命令详解

May 17 Javascript

用Vue-cli搭建的项目中引入css报错的原因分析

Jul 20 Javascript

JavaScript实现精美个性导航栏筋斗云效果

Oct 29 Javascript

vue实现未登录跳转到登录页面的方法

Jul 17 Javascript

JS实现canvas简单小画板功能

Jun 23 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