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 loading效果代码
Jun 18 Javascript
EasyUI实现第二层弹出框的方法
Mar 01 Javascript
深入解读JavaScript中的Iterator和for-of循环
Jul 28 Javascript
jQuery鼠标事件汇总
Aug 30 Javascript
jQuery EasyUI Dialog拖不下来如何解决
Sep 28 Javascript
浅谈js和css内联外联注意事项
Jun 30 Javascript
javascript验证内容为数字以及长度为10的简单实例
Aug 20 Javascript
浅谈Vue下使用百度地图的简易方法
Mar 23 Javascript
示例vue 的keep-alive缓存功能的实现
Dec 13 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
Apr 14 Javascript
es6函数name属性功能与用法实例分析
Apr 18 Javascript
解决Vue router-link绑定事件不生效的问题
Jul 22 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.MVC的模板标签系统(一)
2006/09/05 PHP
php使用百度天气接口示例
2014/04/22 PHP
thinkphp文件引用与分支结构用法实例
2014/11/26 PHP
PHP赋值的内部是如何跑的详解
2019/01/13 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
js客户端快捷键管理类的较完整实现和应用
2010/06/08 Javascript
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
2014/05/19 Javascript
Egret引擎开发指南之创建项目
2014/09/03 Javascript
nodejs批量修改文件编码格式
2015/01/22 NodeJs
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
jQuery异步提交表单实例
2017/05/30 jQuery
vuejs 单文件组件.vue 文件的使用
2017/07/28 Javascript
js定时器+简单的动画效果实例
2017/11/10 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
2019/05/03 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
express中static中间件的具体使用方法
2019/10/17 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
2020/08/12 Javascript
django模型中的字段和model名显示为中文小技巧分享
2014/11/18 Python
python中引用与复制用法实例分析
2015/06/04 Python
Python判断值是否在list或set中的性能对比分析
2016/04/16 Python
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2016/11/19 Python
Python实现将数据框数据写入mongodb及mysql数据库的方法
2018/04/02 Python
Python中new方法的详解
2019/01/15 Python
Python3之字节串bytes与字节数组bytearray的使用详解
2019/08/27 Python
pycharm激活码快速激活及使用步骤
2020/03/12 Python
酒店服务与管理毕业生求职信
2013/11/02 职场文书
个人实用的自我评价范文
2013/11/23 职场文书
计算机专业毕业生推荐信
2013/11/25 职场文书
中专药剂专业应届毕的自我评价
2013/12/27 职场文书
2014年后勤管理工作总结
2014/12/01 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书
和谐拯救危机观后感
2015/06/15 职场文书
浅谈Python实现opencv之图片色素的数值运算和逻辑运算
2021/06/23 Python