【js正则】去除文本中的a标签及其内容

news2024/10/6 6:20:51

场景:有时候服务端返回的文本中,包含a标签,前端不需要展示。

// 示例
const inputText = `【提醒:XXXX】\nXXXXXX: 1\n\n<a href="https://export.shobserver.com/baijiahao/html/767805.html">详情</a>`;

JS正则表达式:

/**
 * 去除文本中的a标签及其内容
 * @param {string} text - 包含a标签的输入文本
 * @return {string} - 去除a标签后的输出文本
 */
export function removeATags(text: string) {
  // 使用正则表达式去掉所有a标签及其内容
  return text.replace(/<a[^>]*>(.*?)<\/a>/g, '');
}

正则表达式解释

正则表达式 /\<a[^>]*>(.*?)<\/a>/g 的含义如下:

  1. / / - 正则表达式的定界符。
  2. <a - 匹配以 <a 开头的字符串。
  3. [^>]* - 匹配 <a 后的任意非 > 字符,匹配0到多个字符。确保匹配整个 <a> 标签及其属性。
  4. > - 匹配 >,即 <a> 标签的结束符。
  5. (.*?) - 非贪婪匹配任意字符,直到遇到 </a>。这个部分是捕获组,表示 <a> 标签中的内容。
  6. </a> - 匹配 </a> 标签的结束部分。
  7. /g - 全局匹配标志,表示替换文本中所有符合正则的部分,而不是仅第一个。

在这里插入图片描述

<template>
  <div id="app">
    <h2>inputText:</h2>
    <br>
    <div v-html="inputText" style="white-space: pre;"></div>
    <br>
    <hr>
    <br>
    <h2>outputText:</h2>
    <br>
    <div v-html="outputText"  style="white-space: pre;"></div>
  </div>
</template>

<script lang="ts" setup>
/**
 * 去除文本中的a标签及其内容
 * @param {string} text - 包含a标签的输入文本
 * @return {string} - 去除a标签后的输出文本
 */
 function removeATags(text) {
    // 使用正则表达式去掉所有a标签及其内容
    return text.replace(/<a[^>]*>(.*?)<\/a>/g, '');
}

// 示例输入文本
const inputText = `【提醒:XXXXX】\nXXXXXX: 1\n\n<a href="https://export.shobserver.com/baijiahao/html/767805.html">详情</a>`;

// 调用方法去除a标签
const outputText = removeATags(inputText);

console.log(outputText);

</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1895464.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【营销策划模型大全】私域运营必备

营销策划模型大全&#xff1a;战略屋品牌屋、电商运营模型、营销战略、新媒体运营模型、品牌模型、私域运营模型…… 该文档是一份策划总监工作模型的汇总&#xff0c;包括战略屋/品牌屋模型、营销战略模型、品牌相关模型、电商运营模型、新媒体运营模型和私域运营模型等&…

JavaScript基础-函数(完整版)

文章目录 函数基本使用函数提升函数参数arguments对象&#xff08;了解&#xff09;剩余参数(重点)展开运算符(...) 逻辑中断函数参数-默认参数函数返回值-return作用域(scope)全局作用域局部作用域变量的访问原则垃圾回收机制闭包 匿名函数函数表达式立即执行函数 箭头函数箭头…

全自动内衣洗衣机什么牌子好?四大热门内衣洗衣机多角度测评

内衣洗衣机是近几年新兴的一种家用电器产品&#xff0c;正日益引起人们的重视。但是&#xff0c;面对市面上品牌繁多、款式繁多的内衣洗衣机&#xff0c;使得很多人都不知道该如何选择。身为一个数码家电博主&#xff0c;我知道这类产品在挑选方面有着比较深入的了解。为此&…

AIGC对设计师积极性的影响

随着科技的迅猛发展&#xff0c;生成式人工智能&#xff08;AIGC&#xff09;工具正逐渐深入设计的每个角落&#xff0c;对设计师的工作方式和思维模式产生了深远的影响。AIGC不仅极大提升了设计师的工作效率&#xff0c;更激发了他们的创新思维&#xff0c;为设计行业带来了翻…

好文阅读-日志篇

https://mp.weixin.qq.com/s/jABbG4MKvEiWXwdYwUk8SA 这里直接看最佳实践。 Maven 依赖 <dependencyManagement><dependencies><dependency><groupId>org.slf4j</groupId><artifactId>slf4j-api</artifactId><version>1.7.36…

聊聊 CTO 和 技术总监的区别

前言 CTO&#xff08;Chief Technology Officer&#xff09;&#xff0c;是首席技术官的意思。 技术总监&#xff0c;顾名思义&#xff0c;就是负责指导和监督公司的技术团队&#xff0c;确保技术和产品的开发与创新顺利进行。 有的软件公司同时有 CTO 和技术总监&#xff0…

第二届计算机、视觉与智能技术国际会议(ICCVIT 2024)

随着科技的飞速发展&#xff0c;计算机、视觉与智能技术已成为推动现代社会进步的重要力量。为了汇聚全球顶尖专家学者&#xff0c;共同探讨这一领域的最新研究成果和前沿技术&#xff0c;第二届计算机、视觉与智能技术国际会议&#xff08;ICCVIT 2024&#xff09;将于2024年1…

JAVA高级进阶11多线程

第十一天、多线程 线程安全问题 线程安全问题 多线程给我们带来了很大性能上的提升,但是也可能引发线程安全问题 线程安全问题指的是当个多线程同时操作同一个共享资源的时候,可能会出现的操作结果不符预期问题 线程同步方案 认识线程同步 线程同步 线程同步就是让多个线…

swiftui中几个常用的手势控制单击点击,双击和长按事件

简单做了一个示例代码&#xff0c;包含三个圆形形状&#xff0c;配置了不同的事件&#xff0c;示例代码&#xff1a; // // RouterView.swift // SwiftBook // // Created by song on 2024/7/4. //import SwiftUIstruct RouterView: View {State var isClick falsevar bod…

中实新材料:领航绿色建材新纪元,北京创新力量再攀高峰!

近期,北京中实新材料有限责任公司(以下简称“中实新材料”)以一系列耀眼的成果,彰显了其在绿色建材领域的卓越领导地位,不仅在生产效能、技术创新、市场拓展上取得了显著突破,更在社会责任与荣誉表彰上赢得了广泛赞誉。作为中关村科技发展(控股)股份有限公司旗下的璀璨明珠,中实…

Java - 程序员面试笔记记录 实现 - Part3

4.1 线程与进程 线程是程序执行的最小单元&#xff0c;一个进程可以拥有多个线程&#xff0c;各个线程之间共享程序的内存空间以及一些进程级资源&#xff0c;但拥有自己的栈空间。 4.3 Java 多线程 方法一&#xff1a;继承 Thread 类&#xff0c;重写 run 方法&#xff1b;…

实验五 数据库完整性约束的实现与验证

题目 在实验四的基础上&#xff0c;重新创建以下三个表&#xff1a; 会员表&#xff1a;member(memno,memname,address,telephone,username,userpwd)&#xff0c;主码为memno&#xff0c;属性memname不能取空值 员工表&#xff1a;employee(empno,empname,depno,sex,telephone…

【电源专题】DC-DC电路设计为什么一般只考虑电感DCR而不考虑Q值呢?

什么是电感器(线圈)的Q值&#xff1f; Q值是表示电感器质量的参数。Q是Quality Factor&#xff08;质量系数&#xff09;的简称。线圈会顺利流过直流电流&#xff0c;但会对交流电流产生电阻。这称为感抗&#xff0c;交流频率越高则越大。 此外&#xff0c;绕组虽是导体…

基于Istio的多网关运行时:配置、部署和应用

1. 引言 Istio是一个开源的服务网格&#xff0c;主要应用于简化微服务架构中的服务间通信、提供强大的监控能力以及加强服务的安全管理。通过利用Sidecar模式部署的Envoy代理&#xff0c;Istio能够在几乎无需修改服务代码的情况下&#xff0c;实现服务发现、负载均衡、加密通信…

C语言实战 | Flappy Bird游戏

Flappy Bird游戏是由一名越南游戏制作者独自开发的&#xff0c;曾经风靡全球。游戏规则非常简单&#xff0c;玩家必须控制一只小鸟&#xff0c;跨越由各种长度的水管所组成的障碍物&#xff0c;如果撞上管道游戏就结束&#xff0c;如图11.11所示。 ■ 图11.11Flappy Bird 游戏 …

go语言day08 泛型 自定义错误处理 go:协程

泛型&#xff1a; 抛错误异常 实现error接口类型 用java语言解释的话&#xff0c;实现类需要重写error类型的抽象方法Error().这样就可以自定义异常处理。 回到go语言&#xff0c;在Error()方法中用*argError 这样一个指针类来充当error接口的实现类。 在f2()方法中定义返回值…

IMU用于仿生水下机器人姿态估计

近期&#xff0c;自中国农业大学的研究团队从海豚身上汲取灵感&#xff0c;成功研发出一种创新性的双腱驱动机器人海豚尾鳍。这项创新性的设计不仅能够实现全方向运动&#xff0c;还能精细地模拟海豚的推力特性&#xff0c;揭示了其背后隐藏的力学秘密。 这款机器人尾鳍设计独特…

23432443

c语言中的小小白-CSDN博客c语言中的小小白关注算法,c,c语言,贪心算法,链表,mysql,动态规划,后端,线性回归,数据结构,排序算法领域.https://blog.csdn.net/bhbcdxb123?spm1001.2014.3001.5343 给大家分享一句我很喜欢我话&#xff1a; 知不足而奋进&#xff0c;望远山而前行&am…

A股现在3000点已经是顶了吗?

今天的A股&#xff0c;让人咬牙切齿了&#xff0c;你们知道是为什么吗&#xff1f;盘面上出现2个重要信号&#xff0c;一起来看看&#xff1a; 1、今天两市高开低走&#xff0c;近4900家股票回落&#xff0c;股民痛心疾首了。昨晚中概股都涨疯了&#xff0c;美股的科技股微软和…

【web APIs】快速上手Day03(Dom事件进阶)

目录 Web APIs - 第3天全选文本框案例事件流事件捕获事件冒泡阻止冒泡解绑事件on事件方式解绑addEventListener方式解绑 注意事项-鼠标经过事件的区别两种注册事件的区别 事件委托综合案例-tab栏切换改造 其他事件页面加载事件元素滚动事件页面滚动事件-获取位置页面滚动事件-滚…