React中如何将API返回的文本转为带HTML标签的段落与链接

你可以通过以下步骤实现需求：

1. 拆分文本为段落：将API返回的文本按换行符\n分割成数组，同时过滤掉空行，避免生成空的<p>标签。
2. 识别并转换链接：用正则表达式匹配段落中的URL，将符合链接格式的段落转换为带<a>标签的<p>，普通文本则直接包裹为<p>标签。
3. 动态渲染处理后的内容：在React组件中编写处理函数，将转换后的JSX数组直接渲染。

代码实现示例 #

// 定义处理文本的方法
formatSummary = () => {
  const summary = this.state.eventInformation.summary || '';
  // 按换行拆分并过滤空段落
  const paragraphs = summary.split('\n').filter(para => para.trim() !== '');

  return paragraphs.map((para, index) => {
    // 匹配HTTP/HTTPS开头的链接
    const urlPattern = /^https?:\/\/[^\s]+$/;
    const trimmedPara = para.trim();

    if (urlPattern.test(trimmedPara)) {
      return (
        <p key={index}>
          <a href={trimmedPara} rel="nofollow noreferrer">{trimmedPara}</a>
        </p>
      );
    }
    return <p key={index}>{trimmedPara}</p>;
  });
}

// 在组件的render方法中调用
render() {
  return (
    <div className="summary-container">
      {this.formatSummary()}
    </div>
  );
}

说明 #

• 正则表达式/^https?:\/\/[^\s]+$/会严格匹配以http://或https://开头且不含空格的链接，确保只有纯链接段落会被转换。
• 添加rel="nofollow noreferrer"属性是为了符合安全规范，避免潜在的跳转风险。
• 使用index作为key是临时方案，如果API返回的内容有唯一标识（如段落ID），建议替换为更稳定的key值。

内容的提问来源于stack exchange，提问作者Ryan Fonseka