Reactjs中如何实现短URL自动转换为对应完整长URL的功能

核心逻辑 #

该功能的实现分为两步：首先从原始链接中提取问题ID，之后获取对应问题的标题生成缩略slug，拼接后即为转换后的链接。

具体实现代码 #

1. 提取问题ID工具方法 #

用正则匹配从输入的链接中提取纯数字的问题ID：

const getQuestionId = (url) => {
  const matchRes = url.match(/stackoverflow\.com\/questions\/(\d+)/);
  return matchRes ? matchRes[1] : null;
};

2. 完整 React 组件实现 #

import { useState, useEffect } from 'react';

const StackLinkTransform = ({ rawUrl }) => {
  const [displayUrl, setDisplayUrl] = useState(rawUrl);

  useEffect(() => {
    const qid = getQuestionId(rawUrl);
    // 未匹配到有效ID直接返回原始链接
    if (!qid) return;

    // 调用公开接口获取问题标题，无密钥也有基础调用额度
    fetch(`https://api.stackexchange.com/2.3/questions/${qid}?order=desc&sort=activity&site=stackoverflow`)
      .then(res => res.json())
      .then(apiRes => {
        if (!apiRes.items?.length) return;
        const rawTitle = apiRes.items[0].title;
        // 生成规范slug：转小写、替换特殊字符为横杠、截断加省略号
        const shortSlug = rawTitle
          .toLowerCase()
          .replace(/[^a-z0-9]+/g, '-')
          .replace(/(^-|-$)/g, '')
          .slice(0, 50);
        // 拼接最终展示的链接
        setDisplayUrl(`https://stackoverflow.com/questions/${qid}/${shortSlug}...`);
      })
      .catch(() => {
        // 接口调用失败时保留原始链接，不影响正常使用
        setDisplayUrl(rawUrl);
      });
  }, [rawUrl]);

  // 可根据需求自定义展示形式，此处直接返回转换后的链接文本
  return <span>{displayUrl}</span>;
};

export default StackLinkTransform;

简化方案 #

如果不需要展示真实的问题slug，可省略接口调用步骤：因为直接访问仅带ID的Stack Overflow链接，平台会自动重定向到带完整slug的页面，展示时直接在原始链接后拼接...即可，无需额外请求。

内容的提问来源于stack exchange，提问作者Nguyễn Tuấn Kiệt