Next.js中修改帖子内关键词子串颜色的实现报错问题

问题描述 #

需求：修改帖子中特定子串的颜色，例如帖子内容为「Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor lacinia urna eget gravida. Quisque magna nulla, fermentum fermentum od
#keyword1 #keyword2 #keyword3 #keyword4 #keyword5」，需为其中带#的关键词设置样式。使用Next.js开发，编写了如下handleBody函数尝试实现，但出现错误：TypeError: Cannot set properties of undefined (setting 'color')。

原错误代码：

function handleBody(){
    var arr1=[],arr2=[];
    for(let i=0;i<post.body.length;i++){
        if(post.body[i]==="#"){
          arr1.push(i);
        }
        if(arr1.length!==arr2.length && post.body[i]===" " ){
            arr2.push(i);
        }
    }
    for(let i=0;i<post.body.length;i++){
      const trial2 =  post.body.substring(arr1[i], arr2[i])
      const trial =  post.body.substring(arr1[i], arr2[i]).style.color ="blue";

      post.body.replace(trial2, trial)
    }
    return post.body
  }

错误原因 #

• 字符串无style属性：post.body.substring(...)返回的是普通字符串，不是DOM元素，调用.style.color自然会报错。
• replace未修改原字符串：字符串是不可变类型，post.body.replace(...)结果需要重新赋值才会生效。
• 关键词提取逻辑有漏洞：最后一个关键词若末尾无空格，arr2不会记录其结束位置，导致substring取值异常。

正确实现方案 #

在Next.js中，更合理的方式是把帖子内容转为JSX元素，给关键词包裹带样式的标签，比如<span>。推荐用正则匹配关键词后完成替换。

方案1：正则+dangerouslySetInnerHTML（适合可信内容场景） #

function formatPostBody(body) {
  // 匹配以#开头的关键词（直到空格或字符串结束）
  const keywordRegex = /#(\w+)/g;
  // 将关键词替换为带蓝色样式的span标签
  const formattedBody = body.replace(keywordRegex, '<span style="color: blue;">#$1</span>');
  return { __html: formattedBody };
}

// 组件中使用
function PostComponent({ post }) {
  return <div dangerouslySetInnerHTML={formatPostBody(post.body)} />;
}

方案2：转为JSX数组（更安全，规避XSS风险） #

function formatPostBody(body) {
  // 按关键词分割内容
  const parts = body.split(/(#\w+)/);
  return parts.map((part, index) => {
    // 判断当前片段是否为关键词
    if (part.startsWith('#')) {
      return <span key={index} style={{ color: 'blue' }}>{part}</span>;
    }
    return part;
  });
}

// 组件中使用
function PostComponent({ post }) {
  return <div>{formatPostBody(post.body)}</div>;
}

注意事项 #

• 若内容来自不可信的用户输入，优先用方案2，避免dangerouslySetInnerHTML带来的XSS风险。
• 正则表达式可根据实际需求调整，比如支持包含特殊字符的关键词。

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