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 中 document.createEvent的用法
Aug 29 Javascript
javascript等号运算符使用详解
Apr 16 Javascript
JavaScript检测鼠标移动方向的方法
May 22 Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 Javascript
jQuery  ready方法实现原理详解
Oct 19 Javascript
详解网站中图片日常使用以及优化手法
Jan 09 Javascript
以BootStrap Tab为例写一个前端组件
Jul 25 Javascript
微信小程序wepy框架笔记小结
Aug 08 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
layui表格数据重载
Jul 27 Javascript
将RGB值转换为灰度值的简单算法
Oct 09 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
Nov 13 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
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
php给图片添加文字水印方法汇总
2015/08/27 PHP
PHP中FTP相关函数小结
2016/07/15 PHP
php版交通银行网银支付接口开发入门教程
2016/09/26 PHP
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
2013/05/28 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
使用Script元素发送JSONP请求的方法
2016/06/12 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
2016/10/14 Javascript
prototype与__proto__区别详细介绍
2017/01/09 Javascript
微信小程序-获得用户输入内容
2017/02/13 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
2017/09/15 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
JavaScript判断日期时间差的实例代码
2018/03/01 Javascript
vue 组件使用中的一些细节点
2018/04/25 Javascript
js实现文件上传功能 后台使用MultipartFile
2018/09/08 Javascript
Layui数据表格跳转到指定页的实现方法
2019/09/05 Javascript
基于vue-draggable 实现三级拖动排序效果
2020/01/10 Javascript
vue+element 实现商城主题开发的示例代码
2020/03/26 Javascript
基于openlayers实现角度测量功能
2020/09/28 Javascript
[02:00]DOTA2英雄COSPLAY闹市街头巡游助威2015国际邀请赛
2015/08/02 DOTA
对Python多线程读写文件加锁的实例详解
2019/01/14 Python
python实现井字棋小游戏
2020/03/04 Python
python中的yield from语法快速学习
2020/11/06 Python
python 基于UDP协议套接字通信的实现
2021/01/22 Python
巴西网上药房:onofre
2016/11/21 全球购物
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
奥地利体育网上商店:Gigasport
2019/10/09 全球购物
银行办理业务介绍信
2014/01/18 职场文书
2014年情人节活动方案
2014/02/16 职场文书
五一活动标语
2014/06/30 职场文书
避暑山庄导游词
2015/02/04 职场文书
清洁工岗位职责
2015/02/13 职场文书
运动员代表致辞
2015/07/29 职场文书
餐厅营销的秘密:为什么老顾客会流水?
2019/08/08 职场文书