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

本文实例讲述了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）初始化时

（2）单击按钮后

（3）单击“确定”后

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>

PS：这里再为大家提供2款非常方便的正则表达式工具供大家参考使用：

JavaScript正则表达式在线测试工具：
http://tools.jb51.net/regex/javascript

正则表达式在线生成工具：
http://tools.jb51.net/regex/create_reg

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript正则表达式技巧大全》、《JavaScript替换操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • JavaScript replace(rgExp,fn)正则替换的用法

    代码如下: 复制代码 代码如下: var rxhtmlTag = /(<([\w:]+)[^>]*?)\/>/g, rselfClosing = /^(?:area|br|col|embed|hr|img|input|link|meta|param)$/i, fcloseTag = function(all, front, tag) { return rselfClosing.test(tag) ? all : front + "></" + tag +

  • JS和C#实现的两个正则替换功能示例分析

    本文实例讲述了JS和C#实现的两个正则替换功能.分享给大家供大家参考,具体如下: 应用实例1: 待处理字符串:str="display=test name=mu display=temp" 要求:把display=后的值都改成localhost JS处理方法: str.replace(/display=\w*/g,"display=localhost"); C#处理方法: Regex reg=new Regex(@"display=\w*");

  • C#正则函数用法实例【匹配、替换、提取】

    本文实例讲述了C#正则函数用法.分享给大家供大家参考,具体如下: System.Text.RegularExpressions 命名空间包含一些类,这些类提供对 .NET Framework 正则表达式引擎的访问.该命名空间提供正则表达式功能,可以从运行在 Microsoft .NET Framework 内的任何平台或语言中使用该功能. 1 正则表达式的常见使用 ① 格式匹配 /// <summary> /// 邮箱格式验证 /// </summary> /// <retu

  • js使用Replace结合正则替换重复出现的字符串功能示例

    本文实例讲述了js使用Replace结合正则替换重复出现的字符串功能.分享给大家供大家参考,具体如下: 今天想把网站上关于用户搜索资料后的结果列表进行处理,如同百度搜索一样,加入我搜索框中输入"我要日日发网络",点击搜索按钮所得的结果列表中将会出现"我要日日发网络"字符串为红色. 我今天想到用js来进行处理,就是利用js内的replace函数对结果列表内的字符串进行指定字符串的替换工作,开始我是这样写的 <script type="text/Java

  • JS正则替换去空格的方法

    本文实例讲述了JS正则替换去空格的方法.分享给大家供大家参考,具体如下: 在网上找了好久,发现没几个是好用的.自己备份一个省得以后再找. //去左空格; function ltrim(s){ return s.replace( /^/s*/, ""); } //去右空格; function rtrim(s){ return s.replace( //s*$/, ""); } //左右空格; function trim(s){ return rtrim(ltrim(s

  • javascript replace()正则替换实现代码

    复制代码 代码如下: var data = "123123,213,<,12312,>,312,3,cat,dsfsdfs,"; alert(func(data)); function func(str) { var reg = /<|>/g; str = str.replace(reg,function($1){ if($1=='<'){ return '<'; }else{ return '>'; } }); return str; } 很

  • JavaScript字符串对象replace方法实例（用于字符串替换或正则替换）

    JavaScript replace 方法 replace 方法用于在字符串中用一些字符串替换另一些字符串,或者替换符合正则匹配的字符串,并返回替换后的字符串.其语法如下: 复制代码 代码如下: str_object.replace(reg_exp/str, replacement) 参数说明: 参数 说明 str_object 要操作的字符串(对象) reg_exp/str 必需.要匹配的正则表达式/要替换的字符串 如果 reg_exp 具有全局标志 g,那么 replace() 方法将替换所

  • javascript 正则替换 replace(regExp, function)用法

    复制代码 代码如下: function fn() { for(var i = 0;i < arguments.length;i++){ alert("第"+(i+1)+"个参数的值:"+arguments[i]); } } var str = '<div id="{wo}" >{ni}</div>'; str.replace(/\{([a-z]+)\}/ig, fn); 根据多次测试由输出结果可以得出fn中: 第一个

  • JS正则替换掉小括号及内容的方法

    正则表达式:\ ( [ ^ \ ) ] * \ ) JS代码: var str="hello(world)"; var nstr = str.replace(/\([^\)]*\)/g,""); 以上这篇JS正则替换掉小括号及内容的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

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

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

    本文实例讲述了JavaScript正则替换HTML标签功能.分享给大家供大家参考,具体如下: 1.说明 获取HTML字符串(包含标签),通过正则表达式替换HTML标签,输出替换后的字符串 2.实现JavaScript代码 function deleteTag() { var regx = /<[^>]*>|<\/[^>]*>/gm; var tagStr = $("#ul_li").html(); alert("替换之前的字符串:"

  • java正则替换img标签中src值的方法

    主要功能是: 替换html字符串中img标签src的值. 代码如下: package com.junlenet.common.util; import java.util.regex.Matcher; import java.util.regex.Pattern; /** * html处理工具类 * @author huweijun * @date 2016年7月13日 下午7:25:09 */ public class HtmlUtils { /** * 替换指定标签的属性和值 * @para

  • JavaScript前端实现小说分页功能示例

    JavaScript前端实现小说分页功能示例

    目录 先让我找找我的思路在哪里 思路已至,码来! 结束 先让我找找我的思路在哪里 在小说读书APP中,都会有分页的功能,那么前端如何实现这个功能呢? 因为没有什么思路,那就只能在前辈的项目中寻找思路了. 这不,直接打开起点的页面,按下那个传说中的F12键,开始我传奇生涯!...不好意思,串台了 好了,然后在找一本有缘书,跟我一同前往那神秘的未知世界. 就决定是你了,开始免费试读. 然后我们就可以发现起点是如何实现这个功能的了,原来是使用columns这个属性来让文章自动分页的昂. 我们现在就去搜

  • JS使用正则表达式实现关键字替换加粗功能示例

    JS使用正则表达式实现关键字替换加粗功能示例

    本文实例讲述了JS使用正则表达式实现关键字替换加粗功能的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

  • jquery ui 实现 tab标签功能示例【测试可用】

    jquery ui 实现 tab标签功能示例【测试可用】

    本文实例讲述了jquery ui 实现 tab标签功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <title>www.jb51.net tab切换</title> <style type="text/css"> #tabs{ width:500px; height:500px; margin:0 auto; } .ui-widget-header{ border

  • javascript字符串替换及字符串分割示例代码

    JS(JavaScript)字符串替换函数(有点像PHP的preg_replace) str.replace('xxx', 'yyyy'); 替换第一个 str.replace(/xxx/g, 'yyyy'); 替换全部 字符串分割(类似PHP的分割函数) 复制代码 代码如下: var test = 'a-b-c-d'; test.split('-');

  • JavaScript实现公历转农历功能示例

    JavaScript实现公历转农历功能示例

    本文实例讲述了JavaScript实现公历转农历功能.分享给大家供大家参考,具体如下: 完整代码(该源码使用在线工具http://tools.jb51.net/code/js进行了格式化处理,以便于读者阅读): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &

  • JavaScript实现的select点菜功能示例

    JavaScript实现的select点菜功能示例

    本文实例讲述了JavaScript实现的select点菜功能.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <title>点菜</title> <style type="text/css"> select{ width:120px; } &l

  • 原生JavaScript实现remove()和recover()功能示例

    本文实例讲述了原生JavaScript实现remove()和recover()功能.分享给大家供大家参考,具体如下: 利用原生JavaScript实现: 1.remove(selectors)删除指定的一个或一组元素. 2.recover(selectors)恢复刚才删除的元素. function remove(selectors) { selectors.removeNode = []; if (selectors.length != undefined) { var len = select

  • javascript+HTML5 canvas绘制时钟功能示例

    javascript+HTML5 canvas绘制时钟功能示例

    本文实例讲述了javascript+HTML5 canvas绘制时钟功能.分享给大家供大家参考,具体如下: 效果如下: 代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net canvas绘制时钟</title> <style> div{text-align:cent

随机推荐