Next.js中修改帖子内关键词子串颜色的问题求助

错误翻译 #

原错误信息：TypeError: Cannot set properties of undefined (setting 'color')
翻译为：TypeError: 无法设置未定义的属性（设置'color'）

问题原因 #

你的代码存在几个核心问题：

1. 字符串没有style属性：post.body.substring(...)返回的是普通字符串，字符串对象不存在style属性，直接设置style.color会触发未定义错误。
2. 字符串不可变：replace方法不会修改原字符串，而是返回新字符串，你没有保存这个返回值，操作无效。
3. 边界情况未处理：最后一个关键词（比如示例里的#keyword5）后面没有空格，你的逻辑抓不到它的结束位置，会导致arr1和arr2长度不匹配，循环时出现索引越界。

正确实现方式 #

方法1：生成JSX元素（推荐，符合React/Next.js规范） #

在Next.js组件中，把帖子内容拆分为普通文本和关键词，给关键词单独套上带样式的span标签：

function PostContent({ post }) {
  // 正则匹配所有#开头的关键词（支持字母数字下划线）
  const keywordRegex = /#(\w+)/g;
  // 分割内容，同时保留关键词内容
  const contentParts = post.body.split(keywordRegex);

  return (
    <div className="post-body">
      {contentParts.map((part, idx) => {
        // 分割后，奇数位是匹配到的关键词内容（不含#）
        if (idx % 2 === 1) {
          return (
            <span key={idx} style={{ color: 'blue', fontWeight: 'bold' }}>
              #{part}
            </span>
          );
        }
        // 偶数位是普通文本，直接渲染
        return part;
      })}
    </div>
  );
}

方法2：使用dangerouslySetInnerHTML（不推荐，有XSS风险） #

如果必须通过HTML字符串处理，可以用正则把关键词替换为带样式的span标签，再通过dangerouslySetInnerHTML渲染：

function PostContent({ post }) {
  // 替换关键词为带蓝色样式的span
  const formattedHtml = post.body.replace(
    /#(\w+)/g,
    '<span style="color: blue;">#$1</span>'
  );

  return <div dangerouslySetInnerHTML={{ __html: formattedHtml }} />;
}

注意：这种方式如果帖子内容包含用户输入的恶意HTML，会引发XSS攻击，仅在内容完全可控时使用。

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