Javascript + ReactJS: Why doesn't regex .match() not return consistently?

Question

I have the following multi-line string displayed using <pre> like the following where each line is represented using new line:

SchoolDistrictCode:291238-9
location_version:3.4
build:e9kem

And I would like to parse build:e9kem out, and every time the content of the multi-line will vary. But it will have build: in every one.

I attempted it with:

const regexp = /^build:(.*)$/m;

//stringPar would vary every time
const stringPar = `SchoolDistrictCode:291238-9
location_version:3.4
build:e9kem`;

Attempt to display it like so:

{stringPar.match(regexp)[1])};

It parses correctly, but for certain multi-line string, it returns Uncaught TypeError: Cannot read property '1' of null when I try to display the string such as stringPar.match(regexp)[1], but it console logs the string properly when console logged like console.log(stringPar.match(regexp)[1]).

What could possibly be the issue?

Thank you in advance and will upvote/accept answer

EDIT (In ReactJS)

It's basically a component that's being rendered over and over, with the props being passed into it.

export default class tableRow extends Component {
     ...

     render() {
          console.log(this.props.stringPar.match(regexp)[1]);

          return (
               <tr>
                 <td>
                   {/*Even tried {this.props.stringPar.match(regexp)[1]==null? " ": this.props.stringPar.match(regexp)} but still getting the same error*/}
                   <button>{this.props.stringPar.match(regexp)[1]}</button>
                 <td>
               <tr>
          )
     }
}

"for certain multi-line string": please give a concrete example. Your problem could also be linked with asynchronous code. Could you please provide a code snippet that has the console.log that fails in the same code block, and that illustrates the problem? — trincot
– trincot, Commented Jan 12, 2017 at 21:24
If the error you get is Uncaught TypeError: Cannot read property '1' of null then it means that the return of this.props.stringPar.match(regexp) is returning null, not the value in the array, hence why the check you tried may not have worked. It looks like the regex is failing sometimes. — jonowzz
– jonowzz, Commented Jan 12, 2017 at 22:47
@jonowzz but I attempted {/*Even tried {this.props.stringPar.match(regexp)[1]==null? " ": this.props.stringPar.match(regexp)} but still getting the same error*/} but when I do console.log(stringPar.match(regexp)[1]) it works though. — Jo Ko
– Jo Ko, Commented Jan 12, 2017 at 23:19
There is no concrete example of failure in your question. Please provide a snippet that we can use to reproduce the problem. Possibly in jsfiddle. — trincot
– trincot, Commented Jan 13, 2017 at 6:01

Jack · Accepted Answer · 2017-01-13 01:32:40Z

1

What could possibly be the issue?

The regex is not matching in all cases probably because:

every time the content of the multi-line will vary

Do something like this so you can see what the string looks like when it doesn't match:

export default class tableRow extends Component {
     ...

     render() {
          // ensure we actually have a string to run match on so don't get an error
          const matchStr = this.props.stringPar || ''; 
          const m = matchStr.match(regexp); // run match
          const matchFound = m && m.length > 0; // boolean, was match found
          const build = matchFound ? m[1] : 'build fallback'; // regex match or fallback if no match was found

          if (!matchFound) {
            console.log("Could not find 'build:' in:", matchStr, matchStr.length === 0 ? 'BLANK!' : 'NOT BLANK');               
          }

          return (
               <tr>
                 <td>
                   <button>{build}</button>
                 <td>
               <tr>
          )
     }
}

and adjust your regex accordingly.

edited Jan 13, 2017 at 1:32

answered Jan 12, 2017 at 22:44

Jack

21.3k12 gold badges51 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jo Ko Over a year ago

Appreciate the response but for some components the same error will stop the program at this.props.stringPar.match(regexp);. What kind of check should I do there?

Jack Over a year ago

@JoKo Sounds like sometimes the prop isn't set. I've updated my answer.

Jack Over a year ago

@JoKo Not sure I follow. Is it sometimes build and sometimes dailyBuild?

Jo Ko Over a year ago

sorry meant build! Actually got it to work! But do you mind commenting briefly on what each line is intended to do? Thanks in advance!

Jack Over a year ago

@JoKo. Sure, updated. Let me know if anything isn't clear.

Collectives™ on Stack Overflow

Javascript + ReactJS: Why doesn't regex .match() not return consistently?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related