如何让Twitter克隆版推文更贴近原版？需实现提及与话题标签蓝色样式

1. 解析推文文本，识别@提及和#话题 #

通过正则表达式匹配文本中的@用户名和#话题，将其替换为可点击的链接元素：

function formatTweetContent(text) {
  // 匹配@开头的用户名（支持字母、数字、下划线）
  const mentionPattern = /@([A-Za-z0-9_]+)/g;
  // 匹配#开头的话题（排除空白字符）
  const hashtagPattern = /#([^\s]+)/g;

  return text
    .replace(mentionPattern, '<a href="/users/$1" class="tweet-mention">@$1</a>')
    .replace(hashtagPattern, '<a href="/hashtags/$1" class="tweet-hashtag">#$1</a>');
}

2. 添加贴近原版的CSS样式 #

设置和Twitter一致的蓝色文字、无下划线，hover时显示下划线：

/* 提及和话题标签通用样式 */
.tweet-mention, .tweet-hashtag {
  color: #1d9bf0; /* Twitter官方蓝色 */
  text-decoration: none;
  font-weight: normal;
}

/* hover状态下划线 */
.tweet-mention:hover, .tweet-hashtag:hover {
  text-decoration: underline;
}

3. 渲染到页面 #

将解析后的HTML插入到推文内容容器中：

// 获取推文容器
const tweetContentEl = document.getElementById('tweet-content');
// 原始推文文本
const rawTweetText = "@AvdhootJagtap 我的Twitter克隆测试推文#前端开发";
// 格式化后渲染
tweetContentEl.innerHTML = formatTweetContent(rawTweetText);

如果使用React、Vue等框架，可对应调整渲染方式：

• React：使用dangerouslySetInnerHTML或封装自定义解析组件
• Vue：使用v-html指令或自定义过滤器

内容的提问来源于stack exchange，提问作者Avdhoot Jagtap