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 实现复制到粘贴板的功能代码
May 13 Javascript
购物车选中得到价格实现示例
Jan 26 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
Oct 23 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
Mar 01 Javascript
Vue.directive()的用法和实例详解
Mar 04 Javascript
Angular Renderer (渲染器)的具体使用
May 03 Javascript
angular.js实现列表orderby排序的方法
Oct 02 Javascript
新手快速上手webpack4打包工具的使用详解
Jan 28 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
Sep 04 Javascript
JavaScript 事件捕获冒泡与捕获详情
Nov 11 Javascript
TypeScript实用技巧 Nominal Typing名义类型详解
Sep 23 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三层结构(上) 简单三层结构
2010/07/04 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
2016/12/23 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
PHP 断点续传实例详解
2017/11/11 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
JQuery的ajax获取数据后的处理总结(html,xml,json)
2010/07/14 Javascript
基于jquery的给文章加入关键字链接
2010/10/26 Javascript
jquery实现的网页自动播放声音
2014/04/30 Javascript
javascript数组排序汇总
2015/07/07 Javascript
原生javascript实现匀速运动动画效果
2016/02/26 Javascript
轻松学习Javascript闭包
2017/03/01 Javascript
js实现图片轮播效果学习笔记
2017/07/26 Javascript
vue-cli中vue本地实现跨域调试接口
2019/01/16 Javascript
VUE v-model表单数据双向绑定完整示例
2019/01/21 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
解决vue路由name同名,路由重复的问题
2020/08/05 Javascript
基于JavaScript的数据结构队列动画实现示例解析
2020/08/06 Javascript
python动态监控日志内容的示例
2014/02/16 Python
Python3.2中的字符串函数学习总结
2015/04/23 Python
浅谈Python处理PDF的方法
2017/11/10 Python
Python tkinter label 更新方法
2018/10/11 Python
解决pytorch-yolov3 train 报错的问题
2020/02/18 Python
如何在python中判断变量的类型
2020/07/29 Python
基于python调用jenkins-cli实现快速发布
2020/08/14 Python
python实现马丁策略回测3000只股票的实例代码
2021/01/22 Python
分享一个H5原生form表单的checkbox特效代码
2018/02/26 HTML / CSS
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
MYSQL基础面试题
2012/05/13 面试题
社区安全检查制度
2014/02/03 职场文书
中专毕业生的自荐书
2014/07/01 职场文书
学生违反校规检讨书
2014/10/28 职场文书
董事长秘书工作总结
2015/08/14 职场文书
2016年度农村党员干部主题教育活动总结
2016/04/06 职场文书
2019年大学生职业生涯规划书最新范文
2019/03/25 职场文书
SQL Server内存机制浅探
2022/04/06 SQL Server