如何在React中插入元素实现输入匹配字符高亮？原生JS方法失效

问题分析 #

你之前用原生JS创建span元素没生效，核心原因是React的渲染逻辑基于状态驱动，直接操作DOM创建元素后没关联到React的渲染流程，自然不会显示。正确做法是通过状态管理搜索关键词，渲染时将文本拆分为普通文本和高亮元素的组合。

解决方案 #

下面是修改后的完整代码，实现输入字符后不区分大小写匹配并高亮：

import React, { useState, useEffect } from "react";
import "./styles.css";
import { posts } from "./data";

const slicedOne = posts.slice(0, 5);
const slicedTwo = posts.slice(5, 10);
const slicedThree = posts.slice(10);

export default function App() {
  const [currentView, setCurrentView] = useState(0);
  const [slicedFeeds] = useState([slicedOne, slicedTwo, slicedThree]);
  const [searchTerm, setSearchTerm] = useState("");

  // 处理文本高亮的工具函数
  const getHighlightedText = (text: string, term: string) => {
    if (!term) return text;
    
    const lowerTerm = term.toLowerCase();
    const parts = text.split(new RegExp(`(${lowerTerm})`, "gi"));
    
    return parts.map((part, idx) => {
      if (part.toLowerCase() === lowerTerm) {
        return <span key={idx} style={{ color: "red" }}>{part}</span>;
      }
      return part;
    });
  };

  // 切换视图时清空搜索词，避免高亮残留
  useEffect(() => {
    setSearchTerm("");
  }, [currentView]);

  return (
    <div>
      <div>
        <input 
          type="text" 
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)} 
          placeholder="输入字符搜索高亮"
        />
      </div>
      {slicedFeeds[currentView].map((feed) => {
        return (
          <div key={feed.dateTimeCreated}>
            <div>{feed.from.name} {feed.dateTimeLastModified}</div>
            <div>{getHighlightedText(feed.fullText, searchTerm)}</div>
            <br />
          </div>
        );
      })}
      <div>
        <button onClick={() => setCurrentView(0)}>1</button>
        <button onClick={() => setCurrentView(1)}>2</button>
        <button onClick={() => setCurrentView(2)}>3</button>
      </div>
    </div>
  );
}

关键说明 #

1. 状态驱动渲染：用searchTerm存储输入内容，输入变化时更新状态，触发React重新渲染
2. 高亮函数逻辑：
   • 搜索词为空时直接返回原文本
   • 用正则表达式拆分文本，匹配部分用红色span包裹，gi修饰符实现不区分大小写+全局匹配
   • 返回React元素数组，React会自动拼接渲染
3. 冗余状态清理：移除原代码中无用的feeds和texts状态，直接用原始切片数据即可
4. 分页联动处理：切换页码时清空搜索词，避免不同页面残留高亮状态

修改后输入任意字符，文本中匹配的字母都会自动高亮为红色，完全符合React的状态驱动渲染逻辑。

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