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

The regex is splitting string on word before colon, i am trying to bold the word before colon like aaaaa bb ccc need to be bold

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

splitString = str.split(regex)

console.log(splitString)

output of the above code is:

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

CodePudding user response：

You can use

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>

Details:

.split(/\s (?=\w :)/) - splits the str string with one or more whitespace chars that are directly followed with 1 word chars and then a : char
.map(x => x.replace(/\w (?=:)/,'<b>$&</b>')) - goes through each split chunk and replaces the the first occurrence of 1 word chars right before a : char with itself wrapped with b tags.

CodePudding user response：

As an alternative to splitting, you can match with 2 capture groups (denoted as m[1] and m[2] in the example code) and make the first group bold in the callback from Array.from

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

(\w ) Capture 1 word chars in group 1
(:.*?) Capture : and as least as possible chars in group 2
(?=\s \w :|$) Positive lookahead, assert 1 word chars followed by : or the end of the string to the right

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

CodePudding user response：

Just modifying AnanthDev's answer to use replace which I think OP is trying to use.

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