javascript - 我们怎样才能将冒号之前的单词加粗，比如 aaaaa bb ccc 在 React js 中需要加粗

Question

正则表达式在冒号之前的单词上分割字符串，我试图将冒号之前的单词加粗，例如 aaaaa bb ccc 需要加粗

str = "aaaaa: lorem ipsum bb: do lor sit amet ccc: no pro movet"
regex = / (?=\w+:)/g

splitString = str.split(regex)

console.log(splitString)

上述代码的输出为:

[
  "aaaaa: lorem ipsum",
  "bb: do lor sit amet",
  "ccc: no pro movet"
]

Answer 1

作为分割的替代方法，您可以匹配 2 个捕获组(在示例代码中表示为 m[1] 和 m[2])，并制作第一组在 Array.from 的回调中加粗

(\w+)(:.*?)(?=\s+\w+:|$)

• (\w+) 捕获第 1 组中的 1 个以上单词字符
• (:.*?) 捕获 : 以及组 2 中尽可能少的字符
• (?=\s+\w+:|$) 正向前瞻，断言 1+ 个单词字符后跟 : 或右侧字符串末尾<

查看regex demo .

const regex = /(\w+)(:.*?)(?=\s+\w+:|$)/g
str = "aaaaa: lorem ipsum bb: do lor sit amet ccc: no pro movet"
str = Array.from(str.matchAll(regex), m => `<b>${m[1]}</b>${m[2]}`);
console.log(str);