当前位置：首页 > 资讯 > 技术文档

JavaScript正则替换HTML标签功能示例

时间：2021-01-28 02:21 编辑：来源：阅读：
扫一扫，手机访问

摘要：JavaScript正则替换HTML标签功能示例

本文实例讲述了JavaScript正则替换HTML标签功能。分享给大家供大家参考，具体如下： [b]1、说明[/b] 获取HTML字符串（包含标签），通过正则表达式替换HTML标签，输出替换后的字符串 [b]2、实现JavaScript代码[/b]

function deleteTag()
{
  var regx = /<[^>]*>|<\/[^>]*>/gm;
  var tagStr = $("#ul_li").html();
  alert("替换之前的字符串：" + tagStr);
  var result = tagStr.replace(regx,"");
  alert("替换之后的字符串：" + result);
}

[b]3、运行结果[/b] （1）初始化时 [img]http://files.jb51.net/file_images/article/201703/201732115613157.jpg?201722115711[/img] （2）单击按钮后 [img]http://files.jb51.net/file_images/article/201703/201732115914468.jpg?20172212016[/img] （3）单击“确定”后 [img]http://files.jb51.net/file_images/article/201703/201732120019989.jpg?20172212033[/img] [b]4、完整实例：[/b]

<!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>

[b]PS：这里再为大家提供2款非常方便的正则表达式工具供大家参考使用：[/b] [b]JavaScript正则表达式在线测试工具： [/b][url=http://tools.jb51.net/regex/javascript]http://tools.jb51.net/regex/javascript[/url] [b]正则表达式在线生成工具： [/b][url=http://tools.jb51.net/regex/create_reg]http://tools.jb51.net/regex/create_reg[/url] 更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《[url=http://www.1sucai.cn/Special/909.htm]JavaScript正则表达式技巧大全[/url]》、《[url=http://www.1sucai.cn/Special/843.htm]JavaScript替换操作技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/472.htm]JavaScript查找算法技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/297.htm]JavaScript数据结构与算法技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/281.htm]JavaScript遍历算法与技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/313.htm]JavaScript中json操作技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/439.htm]JavaScript错误与调试技巧总结[/url]》及《[url=http://www.1sucai.cn/Special/119.htm]JavaScript数学运算用法总结[/url]》希望本文所述对大家JavaScript程序设计有所帮助。

全部评论(0)

上一篇：详解Node.js串行化流程控制
下一篇：javascript流程控制语句集合

资讯排行榜
更多>>