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 相关文章推荐
一个很简单的办法实现TD的加亮效果.
Jun 29 Javascript
JavaScript Archive Network 集合
May 12 Javascript
JavaScript获取GridView选择的行内容
Apr 14 Javascript
js将字符串转成正则表达式的实现方法
Nov 13 Javascript
JS根据年月获得当月天数的实现代码
Jul 03 Javascript
CSS3实现动态背景登录框的代码
Jul 28 Javascript
AngularJS使用ng-repeat指令实现下拉框
Aug 23 Javascript
jQuery获取select选中的option的value值实现方法
Aug 29 Javascript
bootstrap响应式工具使用详解
Nov 29 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
Mar 15 Javascript
Element UI 自定义正则表达式验证方法
Sep 04 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
Sep 14 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
杏林同学录(二)
2006/10/09 PHP
关于PHP自动判断字符集并转码的详解
2013/06/26 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
2010/04/29 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
2012/02/27 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
2015/09/12 Javascript
聊一聊JavaScript作用域和作用域链
2016/05/03 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
2016/08/18 Javascript
JavaScript中浅讲ajax图文详解
2016/11/11 Javascript
简述jQuery Easyui一些用法
2017/08/01 jQuery
Angular2里获取(input file)上传文件的内容的方法
2017/09/05 Javascript
vue用addRoutes实现动态路由的示例
2017/09/15 Javascript
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
详解处理Vue单页面应用SEO的另一种思路
2018/11/09 Javascript
vue实现全屏滚动效果(非fullpage.js)
2020/03/07 Javascript
详解Java中String JSONObject JSONArray List转换
2020/11/13 Javascript
python中使用mysql数据库详细介绍
2015/03/27 Python
详解Python实现按任意键继续/退出的功能
2016/08/19 Python
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
python快速建立超简单的web服务器的实现方法
2018/02/17 Python
利用Python读取txt文档的方法讲解
2018/06/23 Python
将tensorflow的ckpt模型存储为npy的实例
2018/07/09 Python
python用for循环求和的方法总结
2019/07/08 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
解决Alexnet训练模型在每个epoch中准确率和loss都会一升一降问题
2020/06/17 Python
HTC VIVE美国官网:VR虚拟现实眼镜
2018/02/13 全球购物
Java基础面试题
2012/11/02 面试题
小学教师自我鉴定
2013/11/07 职场文书
社区志愿者心得体会
2014/01/03 职场文书
艺术节主持词
2014/04/02 职场文书
广告宣传策划方案
2014/05/21 职场文书
物业管理专业自荐信
2014/07/01 职场文书
十八大标语口号
2014/10/09 职场文书
幼儿园六一主持词开场白
2015/05/28 职场文书
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS