React中如何为换行分割的字符串内冒号前的字段添加下划线

你提到的二次分割思路完全正确，是这类轻量格式处理需求下最直接、无额外依赖的最优实现方式。具体实现可以参考下面的方案：

实现细节说明 #

核心逻辑是拆分每一行的时候只匹配第一个冒号做分割，避免字段值中包含冒号时出现拆分错误，不要直接用split(':')全量拆分。

方案1：标签拆分实现（无安全风险，推荐） #

React Web 版本

// 下划线样式定义，可按需扩展加粗、颜色等属性
const underlineStyle = {
  textDecoration: "underline",
  fontWeight: 500
};

const newText = text.split("\n").map((str, index) => {
  // 仅拆分第一个冒号，拆分后前半部分是要加下划线的字段名，后半部分是字段值
  const [fieldName, ...valueParts] = str.split(/:(.*)/s);
  const fieldValue = valueParts.join(":").trimStart();
  return (
    <p key={index}>
      <span style={underlineStyle}>{fieldName.trim()}</span>: {fieldValue}
    </p>
  );
});

React Native 版本

import { StyleSheet, Text, View } from "react-native";

const styles = StyleSheet.create({
  underlineField: {
    textDecorationLine: "underline",
    fontWeight: "500"
  },
  lineWrapper: {
    flexDirection: "row",
    marginVertical: 2
  }
});

const newText = text.split("\n").map((str, index) => {
  const [fieldName, ...valueParts] = str.split(/:(.*)/s);
  const fieldValue = valueParts.join(":").trimStart();
  return (
    <View style={styles.lineWrapper} key={index}>
      <Text style={styles.underlineField}>{fieldName.trim()}</Text>
      <Text>: {fieldValue}</Text>
    </View>
  );
});

方案2：正则替换实现（仅React Web场景，适合不需要额外控制标签的情况） #

如果不想做多层标签嵌套，也可以用dangerouslySetInnerHTML实现，注意如果字符串是用户输入的不可信内容，不要用这个方案，避免XSS风险：

const newText = text.split("\n").map((str, index) => {
  const formattedStr = str.replace(
    /^([^:]+):/,
    `<span style="text-decoration: underline; font-weight: 500">$1</span>:`
  );
  return <p key={index} dangerouslySetInnerHTML={{ __html: formattedStr }} />;
});

边界情况处理 #

如果存在某行没有冒号的异常场景，可以加个判断直接返回整行内容，避免报错：

const newText = text.split("\n").map((str, index) => {
  if (!str.includes(":")) return <p key={index}>{str}</p>;
  // 其余处理逻辑
})

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