我们怎么能像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演示。

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);

Answer 2

只是修改AnanthDev的答案以使用我认为OP正在尝试使用的replace。

const str = "aaaaa: lorem ipsum bb: do lor sit amet ccc: no pro movet";
const boldArr = str.replace(/(b[^s]+)(:)/g, `n${'$1'.bold()}$2`).split('n').filter(x => x).map(x => x.trim());
console.log(boldArr);

Answer 3

您可以使用

var Component = React.createClass({
render: function() {
var text = this.props.text.split(/s+(?=w+:)/).map((address, index) =>
<p key={index}>{ address.split(/(?=:)/).map((x,i)=> i===0 ? <b key={i}>{x}</b> : x) } </p> );

return <div className="text">{text}</div>;
}
});
var text = 'aaaaa: lorem ipsum bb: do lor sit amet ccc: no pro movet';
ReactDOM.render(
<Component text={text} />,
document.getElementById('container')
);

p {
margin: 0;
padding: 0;
}

<script src="https://unpkg.com/react@0.14.0/dist/react-with-addons.js"></script>
<script src="https://unpkg.com/react-dom@0.14.0/dist/react-dom.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>

详细信息：

• .split(/s+(?=w+:)/)-使用一个或多个空白字符拆分str字符串，空白字符后面直接跟有1个以上的单词字符，然后是:字符
• .map((address, index) => <p key={index}>{ address.split(/(?=:)/).map((x,i)=> i===0 ? <b key={i}>{x}</b> : x) } </p> )-获取每个拆分，并将其值分配给address，将索引分配给index，用<p key=index>/</p>包装项目，并按照以下说明的方式修改项目
• address.split(/(?=:)/).map((x,i)=> i===0 ? <b key={i}>{x}</b> : x)-每个地址字符串在:字符之前的位置被拆分，所有偶数出现都用<b>标签包装，奇数保持原样

注意，key属性对于React能够处理最小DOM更改是必要的，请参阅React.js中理解数组子级的唯一键。