JavaScript实现正则去除a标签并保留内容的方法【测试可用】


Posted in Javascript onJuly 18, 2018

本文实例讲述了JavaScript实现正则去除a标签并保留内容的方法。分享给大家供大家参考,具体如下:

一、问题:

有如下HTML代码,要求用正则去除a标签,只留下内容 //3water.com

<a href="//3water.com/" style="box-sizing: border-box; color: rgb(51, 51, 51); text-decoration: none; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1); -webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1); max-width: 100%; transparent;"><span data-wiz-span="data-wiz-span" style="box-sizing: border-box; max-width: 100%; font-size: 14pt;">//3water.com</span></a>

二、解决方法:

这里使用可删除a标签与span标签的正则语句,如下:

(<\/?a.*?>)|(<\/?span.*?>)

具体js正则语句:

str.replace(/(<\/?a.*?>)|(<\/?span.*?>)/g, '');

完整测试代码如下:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js正则删除a标签并保留内容</title>
</head>
<body>
<a href="//3water.com/" style="box-sizing: border-box; color: rgb(51, 51, 51); text-decoration: none; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1); -webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1); max-width: 100%; transparent;"><span data-wiz-span="data-wiz-span" style="box-sizing: border-box; max-width: 100%; font-size: 14pt;">//3water.com</span></a>
<script>
var str=document.getElementsByTagName('a')[0].outerHTML;
console.log("正则删除之前:"+str);
str=str.replace(/(<\/?a.*?>)|(<\/?span.*?>)/g, '');
console.log("正则删除之后:"+str);
</script>
</body>
</html>

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun,测试结果如下:

JavaScript实现正则去除a标签并保留内容的方法【测试可用】

Javascript 相关文章推荐
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
Sep 14 Javascript
jQuery模拟超链接点击效果代码
Apr 21 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
Apr 24 Javascript
ExtJs中gridpanel分组后组名排序实例代码
Dec 02 Javascript
jquery实现表单验证并阻止非法提交
Jul 09 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
Oct 12 Javascript
javascript伸缩菜单栏实现代码分享
Nov 12 Javascript
js 获取经纬度的实现方法
Jun 20 Javascript
打造自己的jQuery插件入门教程
Sep 23 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
Dec 14 Javascript
vue.js树形组件之删除双击增加分支实例代码
Feb 28 Javascript
详解用node-images 打造简易图片服务器
May 08 Javascript
微信小程序scroll-x失效的完美解决方法
Jul 18 #Javascript
详解easyui基于 layui.laydate日期扩展组件
Jul 18 #Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 #Javascript
微信小程序修改swiper默认指示器样式的实例代码
Jul 18 #Javascript
webpack4.x打包过程详解
Jul 18 #Javascript
vue系列之requireJs中引入vue-router的方法
Jul 18 #Javascript
Vue隐藏显示、只读实例代码
Jul 18 #Javascript
You might like
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
php编程实现简单的网页版计算器功能示例
2017/04/26 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
更正确的asp冒泡排序
2007/05/24 Javascript
node在两个div之间移动,用ztree实现
2013/03/06 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
关于List.ToArray()方法的效率测试
2016/09/30 Javascript
微信小程序 swiper组件详解及实例代码
2016/10/25 Javascript
AngularJS学习第一篇 AngularJS基础知识
2017/02/13 Javascript
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
javascript+jQuery实现360开机时间显示效果
2017/11/03 jQuery
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
webpack4.x下babel的安装、配置及使用详解
2019/03/07 Javascript
layui 实现加载动画以及非真实加载进度的方法
2019/09/23 Javascript
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
详解Python 协程的详细用法使用和例子
2018/06/15 Python
pyqt5的QWebEngineView 使用模板的方法
2018/08/18 Python
Python 将Matrix、Dict保存到文件的方法
2018/10/30 Python
Python从单元素字典中获取key和value的实例
2018/12/31 Python
基于Python实现迪杰斯特拉和弗洛伊德算法
2020/05/27 Python
python函数enumerate,operator和Counter使用技巧实例小结
2020/02/22 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
HTML5+CSS3绘制锯齿状的矩形
2016/03/01 HTML / CSS
美国知名眼镜网站:Target Optical
2020/04/04 全球购物
餐饮业创业计划书范文
2014/01/06 职场文书
幼儿园教师个人反思
2014/01/30 职场文书
幼儿园毕业家长感言
2014/02/10 职场文书
十八届三中全会感言
2014/03/10 职场文书
村党支部书记承诺书
2014/05/29 职场文书
青奥会口号
2014/06/12 职场文书
网络销售员岗位职责
2015/04/11 职场文书
解决Golang中goroutine执行速度的问题
2021/05/02 Golang
Java中Dijkstra(迪杰斯特拉)算法
2022/05/20 Java/Android