如何在React/TypeScript中使用正则表达式修改特定字符的背景颜色？

首先来说说你遇到的「object is possibly null」错误：document.querySelector("h2")返回的结果可能是null——比如组件还没挂载完成、或者当前渲染的DOM里暂时没有h2元素，TypeScript的严格类型检查会提醒你这个风险。而且直接操作DOM并不是React的最佳实践，咱们换一种更符合React逻辑的方式来实现需求。

步骤1：修正正则表达式 #

你原来写的/[ms]/g只会匹配单个的m或s字符，完全达不到匹配「Miss」「Mrs」「Ms」完整称谓的目的。正确的正则应该是/(Miss|Mrs|Ms)/g，这样就能精准匹配这三个目标字符串了。

步骤2：在React渲染时直接处理文本 #

咱们不需要去操作DOM，而是在JSX渲染d.name.title的时候，把匹配到的称谓包裹在带样式的span里。这里要用到dangerouslySetInnerHTML，因为React默认会转义HTML内容，我们需要它来解析我们生成的HTML字符串：

.map((d: any) => ( 
  <div style={hoverStyle} className="ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300 border-white shadow-slate-500 bg-white hover:bg-slate-200 rounded-lg container p-5"> 
    <img className="rounded-full w-44 h-44 " src={d.picture.large} /> 
    {/* 处理称谓的样式 */}
    <h2 dangerouslySetInnerHTML={{
      __html: d.name.title.replace(/(Miss|Mrs|Ms)/g, "<span class='title'>$1</span>")
    }} /> 
    <h3 className="font-bold text-3xl font-serif"> {d.name.first} {d.name.last} </h3> 
    <p className="text-md">Gender: {d.gender}</p> 
    <p className="text-md bg-blue-300 text-white">Contact: {d.email}</p> 
    <p className="text-md"> City: {d.location.city} </p> 
  </div> 
))

注意：使用dangerouslySetInnerHTML时要确保数据源是安全的（比如来自可信的API），避免XSS攻击风险。

步骤3：保留你的CSS样式 #

原来的CSS可以继续用，甚至可以加一点额外样式让效果更好：

.title { 
  background-color: blue; 
  color: white;
  padding: 0 4px;
  border-radius: 2px;
}

额外优化：TypeScript类型定义 #

你当前用了d: any，可以给数据定义一个明确的类型，让代码更健壮，也能获得更好的TypeScript提示：

interface User {
  picture: {
    large: string;
  };
  name: {
    title: string;
    first: string;
    last: string;
  };
  gender: string;
  email: string;
  location: {
    city: string;
  };
}

// 然后在map中使用这个类型：
.map((d: User) => (
  // ... 组件代码
))

这种方式既解决了TypeScript的null警告，又遵循了React的状态管理逻辑，不会出现DOM和组件状态不一致的问题。

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