如何用正则表达式在JSX中仅对含冒号行的冒号前内容加粗？

你的现有代码存在逻辑缺陷：当行内容没有冒号时，split(/(?=:)/)会返回仅包含整行内容的数组，依然会触发加粗逻辑，不符合需求。

你可以改用以下实现：

{ptr.map((line, k) => {
  // 查找当前行第一个冒号的位置
  const colonPos = line.indexOf(':')
  return (
    <p key={k}>
      {/* 没有冒号直接输出整行，有冒号则拆分加粗 */}
      {colonPos < 0 ? line : (
        <>
          <b>{line.slice(0, colonPos)}</b>
          {line.slice(colonPos)}
        </>
      )}
    </p>
  )
})}

实现说明 #

• 先通过indexOf判断行内是否存在冒号，返回值为-1时代表无冒号，直接输出整行内容
• 存在冒号时，切割字符串为冒号前、冒号后两部分，仅对前半部分做加粗处理，后半部分（含冒号）原样输出
• 用React空标签<></>包裹多段内容，不会生成多余的DOM节点

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