我们怎样才能将冒号前的单词加粗，比如 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

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

const str = "aaaaa: lorem ipsum bb: do lor sit amet ccc: no pro movet";

const boldArr = str.replace(/(\b[^\s]+)(:)/g, `\n${''.bold()}`).split('\n').filter(x => x).map(x => x.trim());
console.log(boldArr);

Answer 2

你可以使用

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) => { address.split(/(?=:)/).map((x,i)=> i===0 ? {x} : x) } ) - 获取每个拆分并将其值分配给 address 并将索引分配给 index，用  /  包装项目并修改该项目如下所述...
address.split(/(?=:)/).map((x,i)=> i===0 ? {x} : x) - 每个地址字符串在 : 字符之前的位置拆分，所有偶数出现都用  标记包装，奇数保持原样。

请注意，key 属性是 React 能够处理最小 DOM 更改所必需的，请参阅。

Answer 3

作为拆分的替代方法，您可以匹配 2 个捕获组（在示例代码中表示为 m[1] 和 m[2]）并在来自 [=19 的回调中将第一组设为粗体=]

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

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

how can we bold the word before colon like aaaaa bb ccc need to be bold in react js

javascript

regex

split

jsx

reactjs