CODEWITHSUNDEEP
javascriptreactjsregexstringreplace
Dom355
Dom355

Reputation: 301

Regex don't work in React (but works in console)

I have a regex that is supposed to add a 2 line breaks before every match. When I test the regex everywhere it works perfectly. Even in my console, the result shows but I'm having trouble on the client side. (using react.js)

Here's my code:

class Result extends Component {

render(){

const string = "8044. (a)(1)For the purposes of Title 2 (commencing with Section 8160), “stop payment notice” means the notice given by a claimant under Chapter 5 (commencing with Section 8500) of Title 2. (2)A stop payment notice given under Title 2 (commencing with Section 8160) may be bonded or unbonded. A “bonded stop payment notice” is a notice given with a bond under Section 8532. An “unbonded stop payment notice” is a notice not given with a bond under Section 8532. (3)Except to the extent Title 2 (commencing with Section 8160) distinguishes between a bonded and an unbonded stop payment notice, a reference in that title to a stop payment notice includes both a bonded and an unbonded notice. (b)For the purposes of Title 3 (commencing with Section 9000), “stop payment notice” means the notice given by a claimant under Chapter 4 (commencing with Section 9350) of Title 3. (c)A reference in another statute to a “stop notice” in connection with the remedies provided in this part means a stop payment notice.
"
const splitLaw = string.replace(
            /\([a-z0-9]\)\([a-z0-9]\)|\([a-z0-9]\)/g,
            (this.replacer = (match) => {
                console.log(match);
                return "\n\n" + match;
            }),
        );
    
    return (
    
    <div>
    <p>{splitLaw}</p>
    {console.log(splitLaw)}
    </div>
    
    );}}

Here's what I got in my console and what the results should be:

8044. 

(a)(1)For the purposes of Title 2 (commencing with Section 8160), “stop payment notice” means the notice given by a claimant under Chapter 5 (commencing with Section 8500) of Title 2.

(2)A stop payment notice given under Title 2 (commencing with Section 8160) may be bonded or unbonded. A “bonded stop payment
  notice” is a notice given with a bond under Section 8532. An “unbonded stop payment notice” is a notice not given with a bond under Section 8532.

(3)Except to the extent Title 2 (commencing with Section 8160) distinguishes between a bonded and an unbonded stop payment notice, a reference in that title to a stop payment notice includes both a bonded and an unbonded notice.

(b)For the purposes of Title 3 (commencing with Section 9000), “stop payment notice” means the notice given by a claimant under Chapter 4 (commencing with Section 9350) of Title 3.

(c)A reference in another statute to a “stop notice” in connection with the remedies provided in this part means a stop payment notice.

For some reason on the client side, it doesn't work. I tried with a regex constructor - same results. Why?

Upvotes: 0

Views: 325

Answers (1)

Amy Shackles
Amy Shackles

Reputation: 168

So if you open DevTools to inspect the HTML that's generated through this, you'll see that it is actually outputting what you intend to the DOM, it just isn't formatted visually to indicate that it is.

Two ways of fixing this.

Option 1, CSS:

div {
    white-space: pre-wrap;
}

Option 2: Using paragraph tags: Split splitLaw by '\n\n' and enclose each array item in a paragraph tag. Since paragraph tags are display: block, this'll effectively get you the outcome you're looking for.

splitLaw.split('\n\n').map((item, key) => {
    return <p key={key}>{item}</p>
})

Upvotes: 2

Related Questions