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跨域请求的4种解决方式
Mar 17 Javascript
window.showModalDialog()返回值的学习心得总结
Jan 07 Javascript
js获取会话框prompt的返回值的方法
Jan 10 Javascript
JavaScript控制按钮可用或不可用的方法
Apr 03 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
Dec 08 Javascript
javascript的几种写法总结
Sep 30 Javascript
JS前端笔试题分析
Dec 19 Javascript
node跨域请求方法小结
Aug 25 Javascript
JS设计模式之访问者模式定义与用法分析
Feb 05 Javascript
vue.js父子组件通信动态绑定的实例
Sep 28 Javascript
JavaScript变量作用域及内存问题实例分析
Jun 10 Javascript
JavaScript中layim之整合右键菜单的示例代码
Feb 06 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学习笔记(毕业设计)
2012/02/21 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
Yii2.0中的COOKIE和SESSION用法
2016/08/12 PHP
对laravel in 查询的使用方法详解
2019/10/09 PHP
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
js左侧多级菜单动态的解决方案
2010/02/01 Javascript
AJAX分页的代码(后台asp.net)
2011/02/14 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
2011/05/28 Javascript
js中使用replace方法完成某个字符的转换
2014/08/20 Javascript
js实现大转盘抽奖游戏实例
2015/06/24 Javascript
jQuery hover事件简单实现同时绑定2个方法
2016/06/07 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
2019/04/17 Javascript
vue监听键盘事件的相关总结
2021/01/29 Vue.js
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
基于Python实现文件大小输出
2016/01/11 Python
Python使用OpenCV进行标定
2018/05/08 Python
python cs架构实现简单文件传输
2020/03/20 Python
Python使用pickle模块报错EOFError Ran out of input的解决方法
2018/08/16 Python
python实现最短路径的实例方法
2020/07/19 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
使用numpngw和matplotlib生成png动画的示例代码
2021/01/24 Python
使用css3实现的tab选项卡代码分享
2014/12/09 HTML / CSS
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
俄罗斯园林植物网上商店:Garshinka
2020/07/16 全球购物
二年级体育教学反思
2014/01/15 职场文书
加多宝凉茶广告词
2014/03/18 职场文书
自愿解除劳动合同协议书
2014/09/11 职场文书
个人四风对照检查材料
2014/09/26 职场文书
2014年组织委员工作总结
2014/12/01 职场文书
优秀党员先进事迹材料
2014/12/18 职场文书
武侯祠导游词
2015/02/04 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
公司行政管理制度范本
2015/08/05 职场文书
闭幕词的写作格式与范文!
2019/06/24 职场文书
sqlserver2017共享功能目录路径不可改的解决方法
2021/04/16 SQL Server
Python的三个重要函数详解
2022/01/18 Python