JSX实现方括号包裹文本加粗的更优实现方案

需求说明 #

需要处理目标字符串，在JSX中将所有被方括号[]包裹的文本替换为加粗样式，现有代码可实现基础效果，但存在逻辑冗余、边界场景兼容问题，可通过更简洁的方案实现。

现有代码问题 #

你当前的实现分别做了正则匹配、拆分两次操作，还需要手动维护遍历索引，容易出现索引越界问题：比如当字符串以方括号内容结尾时，会额外渲染一个内容为undefined的空加粗标签；同时JSX列表项没有添加key属性，会触发React的渲染警告。

更优实现方案 #

利用String.split方法的特性：如果传入的正则包含捕获组，捕获组匹配到的内容会被保留在拆分后的结果数组中，仅需一次正则处理即可完成拆分，不需要额外维护索引：

const unformattedString = "[name] Hi there, my name is [name], I am [age] years old, and I work in the field of [profession]";

const jsxArray = unformattedString
  .split(/\[([^\]]+)\]/g)
  .map((segment, index) => {
    // 拆分后数组奇数索引位的内容就是方括号包裹的文本，需要加粗
    return index % 2 === 1 
      ? <b key={index}>{segment}</b> 
      : segment;
  });

方案优势 #

• 仅执行一次正则匹配，性能优于两次正则操作的实现
• 逻辑极简，不需要手动维护索引、不需要额外写分支判断处理开头/无匹配项等边界场景
• 天然兼容所有位置的方括号内容：不管方括号内容出现在字符串开头、中间、结尾，或是字符串中没有任何方括号内容，都能正确渲染
• 自动给列表项加上了唯一key，避免React渲染警告

渲染结果完全符合预期：

name Hi there, my name is name, I am age years old, and I work in the field of profession

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