场景:有时候服务端返回的文本中,包含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
的含义如下:
/ /
- 正则表达式的定界符。<a
- 匹配以<a
开头的字符串。[^>]*
- 匹配<a
后的任意非>
字符,匹配0到多个字符。确保匹配整个<a>
标签及其属性。>
- 匹配>
,即<a>
标签的结束符。(.*?)
- 非贪婪匹配任意字符,直到遇到</a>
。这个部分是捕获组,表示<a>
标签中的内容。</a>
- 匹配</a>
标签的结束部分。/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>