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 相关文章推荐
Gird事件机制初级读本
Mar 10 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
May 26 Javascript
jquery ready()的几种实现方法小结
Jun 18 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
Sep 14 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
May 03 Javascript
JS的参数传递示例介绍
Feb 08 Javascript
jquery自定义下拉列表示例
Apr 25 Javascript
Javascript玩转继承(一)
May 08 Javascript
jquery树形菜单效果的简单实例
Jun 06 Javascript
js仿小米手机上下滑动效果
Feb 05 Javascript
vue实现行列转换的一种方法
Aug 06 Javascript
javascript进阶篇深拷贝实现的四种方式
Jul 07 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
通过文字传递创建的图形按钮
2006/10/09 PHP
PHP贪婪算法解决0-1背包问题实例分析
2015/03/23 PHP
学习YUI.Ext 第四天--对话框Dialog的使用
2007/03/10 Javascript
jQuery学习5 jQuery事件模型
2010/02/07 Javascript
关于jquery中全局函数each使用介绍
2013/12/10 Javascript
javascript模拟实现ajax加载框实例
2014/10/15 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
2014/10/17 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
VueJs使用Amaze ui调整列表和内容页面
2017/11/30 Javascript
微信小程序实现流程进度的图样式功能
2018/01/16 Javascript
react native 原生模块桥接的简单说明小结
2019/02/26 Javascript
JS实现动态无缝轮播
2020/01/11 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
Python的另外几种语言实现
2015/01/29 Python
python中range()与xrange()用法分析
2016/09/21 Python
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
python flask框架实现重定向功能示例
2019/07/02 Python
解决Django 在ForeignKey中出现 non-nullable field错误的问题
2019/08/06 Python
python针对mysql数据库的连接、查询、更新、删除操作示例
2019/09/11 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
浅谈numpy中函数resize与reshape,ravel与flatten的区别
2020/06/18 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
机械专业个人求职自荐信格式
2013/09/21 职场文书
好的自荐信的要求
2013/10/30 职场文书
班组长安全生产职责
2013/12/16 职场文书
奉献家乡演讲稿
2014/09/13 职场文书
英语课前三分钟演讲稿(6篇)
2014/09/13 职场文书
防火标语大全
2014/10/06 职场文书
自书遗嘱范文
2015/08/07 职场文书
pycharm无法导入lxml的解决办法
2021/03/31 Python
详解Redis复制原理
2021/06/04 Redis
python3实现常见的排序算法(示例代码)
2021/07/04 Python