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页面不刷新时全选择,全删除(GridView)
Apr 14 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
Jun 19 Javascript
详解Jquery实现ready和bind事件
Apr 14 Javascript
React Native实现简单的登录功能(推荐)
Sep 19 Javascript
JavaScript中省略元素对数组长度的影响
Oct 26 Javascript
原生js编写基于面向对象的分页组件
Dec 05 Javascript
bootstrap modal弹出框的垂直居中
Dec 14 Javascript
浅谈React深度编程之受控组件与非受控组件
Dec 26 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
解决在layer.open中使用时间控件laydate失败的问题
Sep 11 Javascript
js实现小球在页面规定的区域运动
Jun 16 Javascript
JavaScript实现网页计算器功能
Oct 29 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编程中字符串处理的5个技巧小结
2007/11/13 PHP
PHP中的gzcompress、gzdeflate、gzencode函数详解
2014/07/29 PHP
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
全面解读PHP的人气开发框架Laravel
2015/10/15 PHP
javascript写的日历类(基于pj)
2010/12/28 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
2012/01/10 Javascript
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
jQuery Validate验证框架经典大全
2015/09/23 Javascript
JavaScript Length 属性的总结
2015/11/02 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
纯js的右下角弹窗实例
2017/03/12 Javascript
微信公众号菜单配置微信小程序实例详解
2017/03/31 Javascript
浅谈函数调用的不同方式,以及this的指向
2017/09/17 Javascript
从setTimeout看js函数执行过程
2017/12/19 Javascript
nuxt中使用路由守卫的方法步骤
2019/01/27 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
微信小程序canvas实现签名功能
2021/01/19 Javascript
[48:24]完美世界DOTA2联赛循环赛LBZS vs Forest 第一场 10月30日
2020/10/31 DOTA
Python使用matplotlib简单绘图示例
2018/02/01 Python
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
详解python websocket获取实时数据的几种常见链接方式
2019/07/01 Python
在Sublime Editor中配置Python环境的详细教程
2020/05/03 Python
纯CSS3实现的阴影效果
2014/12/24 HTML / CSS
Sneaker Studio捷克:购买运动鞋
2018/07/08 全球购物
怎么可以提高数据库查询数据的速度
2014/06/28 面试题
酒店管理专业毕业生推荐信
2013/11/10 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
党员批评与自我批评范文
2014/09/23 职场文书
2015年保洁员工作总结
2015/05/04 职场文书
2015年档案管理员工作总结
2015/05/13 职场文书
行政申诉状范文
2015/05/20 职场文书
学校运动会简讯
2015/07/20 职场文书
2016年学校党支部公开承诺书
2016/03/25 职场文书
2019班干部竞选演讲稿范本!
2019/07/08 职场文书