React JS中如何将字符串内冒号前的单词设置为粗体

方案1：基于你现有拆分逻辑实现 #

你已经完成了字符串拆分，遍历拆分后的数组，把每个分段按第一个冒号拆为前后两部分，前半部分套粗体标签再拼接渲染即可：

function BoldKeywordBeforeColon() {
  const str = "aaaaa: lorem ipsum bb: do lor sit amet ccc: no pro movet";
  const regex = / (?=\w+:)/g;
  const splitString = str.split(regex);

  return (
    <p>
      {splitString.map((segment, index) => {
        const colonPos = segment.indexOf(":");
        // 拆分冒号前后内容，避免内容中包含冒号导致样式错误
        const keyword = segment.slice(0, colonPos);
        const content = segment.slice(colonPos);
        return (
          <span key={index}>
            <strong>{keyword}</strong>{content}{" "}
          </span>
        );
      })}
    </p>
  );
}

方案2：直接正则替换（适合无XSS风险的场景） #

不用提前拆分字符串，直接用正则捕获所有冒号前的单词，替换为带粗体标签的格式，配合dangerouslySetInnerHTML渲染：

function BoldKeywordBeforeColon() {
  const str = "aaaaa: lorem ipsum bb: do lor sit amet ccc: no pro movet";
  // 分组捕获冒号前的单词，替换为粗体格式
  const formattedStr = str.replace(/(\w+):/g, "<strong>$1</strong>:");
  return <p dangerouslySetInnerHTML={{ __html: formattedStr }} />;
}

方案3：安全无XSS风险的实现 #

如果字符串可能包含用户输入的恶意内容，不想用dangerouslySetInnerHTML，可以通过正则匹配生成React元素数组渲染：

function BoldKeywordBeforeColon() {
  const str = "aaaaa: lorem ipsum bb: do lor sit amet ccc: no pro movet";
  const matchRegex = /(\w+):([\s\S]*?)(?=\s\w+:|$)/g;
  const renderElements = [];
  let matchResult;

  while ((matchResult = matchRegex.exec(str)) !== null) {
    renderElements.push(
      <span key={matchResult.index}>
        <strong>{matchResult[1]}</strong>:{matchResult[2]}
      </span>
    );
  }

  return <p>{renderElements}</p>;
}

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