如何在JSX/JavaScript中将下划线包裹的字符串设为粗体

我们从数据库获取的目标字符串格式如下：

This is string from DB. Make sure this is format from DB

需要把两个下划线之间的文本转换为粗体格式，以下是两种可行的实现方案：

方案一：正则替换结合dangerouslySetInnerHTML（简单直接） #

适合能确保数据库字符串无XSS风险的场景，直接通过正则匹配替换后渲染：

function formatDbString(str) {
  // 匹配下划线包裹的内容，替换为<strong>标签
  const formattedContent = str.replace(/_([^_]+)_/g, '<strong>$1</strong>');
  return <div dangerouslySetInnerHTML={{ __html: formattedContent }} />;
}

// 使用示例
const dbString = '_This is string from DB_. Make sure this is format from DB';
export default function App() {
  return formatDbString(dbString);
}

方案二：拆分字符串生成JSX元素（安全无风险） #

无需使用危险的HTML渲染，通过拆分字符串构建JSX元素数组，安全性更高：

function formatDbString(str) {
  const parts = str.split(/_/);
  const jsxFragments = [];

  parts.forEach((part, index) => {
    if (!part) return;
    // 奇数索引的部分是下划线包裹的内容，用粗体标签包裹
    jsxFragments.push(
      index % 2 === 1 ? <strong key={index}>{part}</strong> : part
    );
  });

  return jsxFragments;
}

// 使用示例
const dbString = '_This is string from DB_. Make sure this is format from DB';
export default function App() {
  return <div>{formatDbString(dbString)}</div>;
}

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