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在IE和FF下attachEvent,addEventListener学习笔记
Nov 26 Javascript
JavaScript中SQL语句的应用实现
May 04 Javascript
Javascript闭包实例详解
Nov 29 Javascript
基于原生JS实现图片裁剪
Aug 01 Javascript
原生js封装的一些jquery方法(详解)
Sep 20 Javascript
node.js操作mysql简单实例
May 25 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
Nov 14 Javascript
Vue实现web分页组件详解
Nov 28 Javascript
Angular4的输入属性与输出属性实例详解
Nov 29 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
Oct 24 Javascript
Vue双向数据绑定(MVVM)的原理
Oct 03 Javascript
ES6的循环与可迭代对象示例详解
Jan 31 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对象类型判断
2008/08/27 PHP
基于MySQL到MongoDB简易对照表的详解
2013/06/03 PHP
PHP错误Parse error: syntax error, unexpected end of file in test.php on line 12解决方法
2014/06/23 PHP
PHP实现将多个文件压缩成zip格式并下载到本地的方法示例
2018/05/23 PHP
浅谈PHPANALYSIS提取关键字
2019/03/08 PHP
js获取height和width的方法说明
2013/01/06 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
2013/01/23 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
2013/04/18 Javascript
JS将制定内容复制到剪切板示例代码
2014/02/11 Javascript
javascript框架设计读书笔记之模块加载系统
2014/12/02 Javascript
javascript中的altKey 和 Event属性大全
2015/11/06 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
2016/01/19 Javascript
设置点击文本框或图片弹出日历控件的实现代码
2016/05/12 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
AngularJS实现根据变量改变动态加载模板的方法
2016/11/04 Javascript
jQuery删除当前节点元素
2016/12/07 Javascript
easyUI combobox实现联动效果
2017/01/17 Javascript
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
Angular Material Icon使用详解
2018/11/07 Javascript
详细分析Node.js 模块系统
2020/06/28 Javascript
微信小程序实现分页加载效果
2020/11/19 Javascript
python文件和目录操作函数小结
2014/07/11 Python
Python实现以时间换空间的缓存替换算法
2016/02/19 Python
Python反转序列的方法实例分析
2018/03/21 Python
Python抽象和自定义类定义与用法示例
2018/08/23 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
2020最新pycharm汉化安装(python工程狮亲测有效)
2020/04/26 Python
MoviePy简介及Python视频剪辑自动化
2020/12/18 Python
CSS Grid布局教程之网格单元格布局
2014/12/30 HTML / CSS
汽车运用工程系毕业生自荐信
2013/12/27 职场文书
校园会短篇的广播稿
2014/10/21 职场文书
个人原因辞职信模板
2015/05/13 职场文书
《圆的面积》教学反思
2016/02/19 职场文书
《风不能把阳光打败》读后感3篇
2020/01/06 职场文书
深入理解Vue的数据响应式
2021/05/15 Vue.js