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

场景：有时候服务端返回的文本中，包含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>