正則運算式在冒號之前在單詞上拆分字串，我試圖在冒號之前將單詞加粗，例如 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"
]
uj5u.com熱心網友回復：
作為拆分的替代方法，您可以匹配 2 個捕獲組（在示例代碼中表示為m[1]和m[2]）并在Array.from的回呼中將第一組設為粗體
(\w )(:.*?)(?=\s \w :|$)
(\w )捕獲第 1 組中的 1 個字字符(:.*?)捕獲:第 2 組中盡可能少的字符(?=\s \w :|$)正向前瞻，斷言 1 個字字符后跟:或 右邊字串的結尾
請參閱正則運算式演示。
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);uj5u.com熱心網友回復：
只是修改 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${'$1'.bold()}$2`).split('\n').filter(x => x).map(x => x.trim());
console.log(boldArr);uj5u.com熱心網友回復：
您可以使用
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/[email protected]/dist/react-with-addons.js"></script>
<script src="https://unpkg.com/[email protected]/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(x => x.replace(/\w (?=:)/,'<b>$&</b>'))- 遍歷每個拆分塊并替換第一個出現的 1 字字符，就在字符之前:，其自身用b標簽包裹。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/358662.html
標籤：javascript 正则表达式 分裂 jsx
上一篇：使用正則運算式獲取帶邊界的資料