TypeScript文本转超链接问题：锚标签显示为纯文本

安全阿岳

2026-8-7

问题原因及解决方案

核心原因

你遇到的问题是因为前端框架（比如React、Vue）或原生DOM操作中，默认会对文本内容进行HTML转义，目的是防范XSS攻击。当你返回包含<a>标签的字符串时，框架会把<转成<、>转成>，导致标签以纯文本形式显示，而不是被解析成可点击的链接。

针对性解决方案

根据你使用的前端环境，选择对应的处理方式：

1. 原生JavaScript/HTML场景

如果是直接操作原生DOM，不要用textContent赋值，改用innerHTML：

// 假设你有一个id为content的元素
document.getElementById('content').innerHTML = Urlify(yourText);

2. React场景

React默认禁止直接渲染HTML字符串，需要使用dangerouslySetInnerHTML属性：

function YourComponent() {
  const text = "Hi the line is www.google.com. End of line.";
  const urlifiedText = Urlify(text);
  return <div dangerouslySetInnerHTML={{ __html: urlifiedText }} />;
}

3. Vue场景

Vue提供了v-html指令来渲染原始HTML：

<template>
  <div v-html="urlifiedText"></div>
</template>

<script setup>
import { computed } from 'vue';
const rawText = "Hi the line is www.google.com. End of line.";
const urlifiedText = computed(() => Urlify(rawText));
</script>

额外优化：修复URL正则的小问题

你的正则存在一个隐患：www开头的链接会被直接作为href的值，浏览器会把它当成相对路径（比如当前域名下的www.google.com），导致跳转错误。建议修改正则，给www开头的链接自动补全http://：

Urlify(text: string) {
  const exp = /(\b((https?|ftp|file):\/\/|(www))[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|]*)/ig; 
  return text.replace(exp, (match) => {
    // 检查是否以http开头，没有的话补全http://
    const href = match.startsWith('http') ? match : `http://${match}`;
    return `<a href="${href}">${match}</a>`;
  });
}