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 相关文章推荐
javascript和jQuery实现网页实时聊天的ajax长轮询
Jul 20 Javascript
响应式表格之固定表头的简单实现
Aug 26 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
Nov 03 Javascript
jquery网页加载进度条的实现
Jun 01 jQuery
vue.js声明式渲染和条件与循环基础知识
Jul 31 Javascript
vue如何通过id从列表页跳转到对应的详情页
May 01 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
Nov 19 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
Nov 07 Javascript
javascript 设计模式之组合模式原理与应用详解
Apr 08 Javascript
使用 UniApp 实现小程序的微信登录功能
Jun 09 Javascript
uni-app 微信小程序授权登录的实现步骤
Feb 18 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/04/05 PHP
PHP 验证码的实现代码
2011/07/17 PHP
php 计划任务 检测用户连接状态
2012/03/29 PHP
6个超实用的PHP代码片段
2015/08/10 PHP
图片自动更新(说明)
2006/10/02 Javascript
求得div 下 img的src地址的js代码
2007/02/28 Javascript
JavaScript DOM 学习第五章 表单简介
2010/02/19 Javascript
用jquery中插件dialog实现弹框效果实例代码
2013/11/15 Javascript
jquery 取子节点及当前节点属性值的方法
2014/08/24 Javascript
省市区三级联动下拉框菜单javascript版
2015/08/11 Javascript
javascript bom是什么及bom和dom的区别
2015/11/26 Javascript
继续学习javascript闭包
2015/12/03 Javascript
javascript制作照片墙及制作过程中出现的问题
2016/04/04 Javascript
原生JS实现首页进度加载动画
2016/09/14 Javascript
vue自定义指令实现v-tap插件
2016/11/03 Javascript
Bootstrap CSS布局之表单
2016/12/17 Javascript
关于预加载InstantClick的问题解决方法
2017/09/12 Javascript
vue文件树组件使用详解
2018/03/29 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
2019/05/23 jQuery
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
2019/09/06 Javascript
python根据出生日期返回年龄的方法
2015/03/26 Python
Python删除windows垃圾文件的方法
2015/07/14 Python
Python计算已经过去多少个周末的方法
2015/07/25 Python
python编程实现归并排序
2017/04/14 Python
windows下python安装paramiko模块和pycrypto模块(简单三步)
2017/07/06 Python
[原创]教女朋友学Python3(二)简单的输入输出及内置函数查看
2017/11/30 Python
python实现两个文件合并功能
2018/04/01 Python
python实现内存监控系统
2021/03/07 Python
Python3.4学习笔记之类型判断,异常处理,终止程序操作小结
2019/03/01 Python
Python新手学习函数默认参数设置
2020/06/03 Python
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
澳大利亚二手奢侈品网站:Modsie
2019/09/23 全球购物
校园会短篇的广播稿
2014/10/21 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书
经营目标责任书
2015/05/08 职场文书
领导欢送会主持词
2015/07/06 职场文书