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 相关文章推荐
让您的菜单不离网站
Oct 03 Javascript
简单三步,搞掂内存泄漏
Mar 10 Javascript
jquery实现心算练习代码
Dec 06 Javascript
jQuery中empty()方法用法实例
Jan 16 Javascript
jquery实现公告翻滚效果
Feb 27 Javascript
JS动态显示表格上下frame的方法
Mar 31 Javascript
JavaScript数据结构之数组的表示方法示例
Apr 12 Javascript
AngularJs 常用的过滤器
May 15 Javascript
详解webpack2+React 实例demo
Sep 11 Javascript
解决JavaScript layui 下拉框不显示的问题
Aug 14 Javascript
vue2路由方式--嵌套路由实现方法分析
Mar 06 Javascript
基于javascript处理二进制图片流过程详解
Jun 08 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的历史和优缺点
2006/10/09 PHP
PHP+memcache实现消息队列案例分享
2014/05/21 PHP
2个Codeigniter文件批量上传控制器写法例子
2014/07/25 PHP
Laravel 5框架学习之模型、控制器、视图基础流程
2015/04/08 PHP
ThinkPHP实现简单登陆功能
2017/04/28 PHP
javascript import css实例代码
2008/07/18 Javascript
浅析JavaScript中的delete运算符
2013/11/30 Javascript
jquery实现的导航固定效果
2014/04/28 Javascript
一个可以增加和删除行的table并可编辑表格中内容
2014/06/16 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
2014/10/19 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
2014/11/02 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
2015/03/31 Javascript
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
webpack2.0配置postcss-loader的方法
2017/08/17 Javascript
vue+iview+less+echarts实战项目总结
2018/02/22 Javascript
node.js读取Excel数据(下载图片)的方法示例
2018/08/02 Javascript
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
详解vue服务端渲染浏览器端缓存(keep-alive)
2018/10/12 Javascript
使用webpack编译es6代码的方法步骤
2019/04/28 Javascript
微信小程序登陆注册功能的实现代码
2019/12/10 Javascript
vue下axios拦截器token刷新机制的实例代码
2020/01/17 Javascript
[02:18]DOTA2英雄基础教程 育母蜘蛛
2014/01/20 DOTA
Python设计模式之职责链模式原理与用法实例分析
2019/01/11 Python
Python 串口通信的实现
2020/09/29 Python
美国美发品牌:Bumble and Bumble
2016/10/08 全球购物
购买200个世界上最好的内衣品牌:Bare Necessities
2017/02/11 全球购物
巴黎一票通:The Paris Pass
2018/02/10 全球购物
婴儿地球:Baby Earth
2018/12/25 全球购物
苹果台湾官网:Apple台湾
2019/01/05 全球购物
数百万免费的图形资源:Freepik
2020/09/21 全球购物
创意广告词
2014/03/17 职场文书
学雷锋活动总结范文
2014/04/25 职场文书
党员承诺书怎么写
2014/05/20 职场文书
调研座谈会发言材料
2014/08/23 职场文书
大学生创业事迹材料
2014/12/30 职场文书
离婚起诉书范文2015
2015/05/19 职场文书