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 相关文章推荐
用js实现预览待上传的本地图片
Mar 15 Javascript
Javascript 中介者模式实例
Dec 16 Javascript
Javascript代码在页面加载时的执行顺序介绍
May 03 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
Mar 26 Javascript
简介JavaScript中的sub()方法的使用
Jun 08 Javascript
javascript检查浏览器是否已经启用XX功能
Jul 10 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 Javascript
AngularJS 依赖注入详解和简单实例
Jul 28 Javascript
基于canvas的二维码邀请函生成插件
Feb 14 Javascript
浅谈Redux中间件的实践
Jul 27 Javascript
JavaScript array常用方法代码实例详解
Sep 02 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
MyEclipse常用配置图文教程
2014/09/11 PHP
php阳历转农历优化版
2016/08/08 PHP
浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑
2017/10/13 PHP
关于JavaScript中var声明变量作用域的推断
2010/12/16 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
2015/10/23 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
微信小程序 网络请求(post请求,get请求)
2017/01/17 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
vue.js中ref和$refs的使用及示例讲解
2019/08/14 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
vue实现防抖的实例代码
2021/01/11 Vue.js
[01:14:34]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第一局
2016/02/28 DOTA
浅析Python中的序列化存储的方法
2015/04/28 Python
Python使用asyncio包处理并发详解
2017/09/09 Python
python爬虫之xpath的基本使用详解
2018/04/18 Python
python 用正则表达式筛选文本信息的实例
2018/06/05 Python
python:接口间数据传递与调用方法
2018/12/17 Python
解决django服务器重启端口被占用的问题
2019/07/26 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
django执行原始查询sql,并返回Dict字典例子
2020/04/01 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
Python3使用tesserocr识别字母数字验证码的实现
2021/01/29 Python
Biblibili视频投稿接口分析并以Python实现自动投稿功能
2021/02/05 Python
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
如何实现一个自定义类的序列化
2012/05/22 面试题
办公室文秘自我鉴定
2013/09/21 职场文书
项目管理计划书
2014/01/09 职场文书
普通党员对照检查材料
2014/09/24 职场文书
2015年端午节活动策划书
2015/05/05 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
《开国大典》教学反思
2016/02/16 职场文书
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技