regex javascript not working as expected

Question

I wrote and tested the following regex online.

Regex: />([^<]*)<\//g

Test String: <td style="text-align: center;">31</td><td style="text-align: center;">14</td><td style="text-align: center;">opened</td><td style="text-align: center;">receiver</td><td style="text-align: center;">elro_800_contact</td><td style="text-align: center;">0000-e8-de-27-176d10</td><td style="text-align: center;">6</td>

After testing and running it online. It returns the following matches:

MATCH 1
1.  [32-34] `31`
MATCH 2
1.  [71-73] `14`
MATCH 3
1.  [110-116]   `opened`
MATCH 4
1.  [153-161]   `receiver`
MATCH 5
1.  [198-214]   `elro_800_contact`
MATCH 6
1.  [251-271]   `0000-e8-de-27-176d10`
MATCH 7
1.  [308-309]   `6`

However when I run it through the following code:

function parseTableNewDevice(str) {
        var regexSearchExpression = />([^<]*)<\//g;
        var regexResultAddDevice;

        while ((regexResultAddDevice = regexSearchExpression.exec(str)) !== null) {
            if (regexResultAddDevice.index === regexSearchExpression.lastIndex) {
                regexSearchExpression.lastIndex++;
            }
            // View your result using the regexResultAddDevice-variable.
            // eg regexResultAddDevice[0] etc.
            console.log(regexResultAddDevice);
        }
}

It returns this:

[">31</", "31", index: 31, input: "<td style="text-align: center;">31</td><td style="…6d10</td><td style="text-align: center;">323</td>"]0: ">31</"1: "31"index: 31input: "<td style="text-align: center;">31</td><td style="text-align: center;">14</td><td style="text-align: center;">on</td><td style="text-align: center;">receiver</td><td style="text-align: center;">pollin</td><td style="text-align: center;">0000-e8-de-27-176d10</td><td style="text-align: center;">323</td>"length: 2__proto__: Array[0]
index.html:65 
[">14</", "14", index: 70, input: "<td style="text-align: center;">31</td><td style="…6d10</td><td style="text-align: center;">323</td>"]0: ">14</"1: "14"index: 70input: "<td style="text-align: center;">31</td><td style="text-align: center;">14</td><td style="text-align: center;">on</td><td style="text-align: center;">receiver</td><td style="text-align: center;">pollin</td><td style="text-align: center;">0000-e8-de-27-176d10</td><td style="text-align: center;">323</td>"length: 2__proto__: Array[0]
    index.html:65 
[">on</", "on", index: 109, input: "<td style="text-align: center;">31</td><td style="…6d10</td><td style="text-align: center;">323</td>"]0: ">on</"1: "on"index: 109input: "<td style="text-align: center;">31</td><td style="text-align: center;">14</td><td style="text-align: center;">on</td><td style="text-align: center;">receiver</td><td style="text-align: center;">pollin</td><td style="text-align: center;">0000-e8-de-27-176d10</td><td style="text-align: center;">323</td>"length: 2__proto__: Array[0]
    index.html:65 
[">receiver</", "receiver", index: 148, input: "<td style="text-align: center;">31</td><td style="…6d10</td><td style="text-align: center;">323</td>"]0: ">receiver</"1: "receiver"index: 148input: "<td style="text-align: center;">31</td><td style="text-align: center;">14</td><td style="text-align: center;">on</td><td style="text-align: center;">receiver</td><td style="text-align: center;">pollin</td><td style="text-align: center;">0000-e8-de-27-176d10</td><td style="text-align: center;">323</td>"length: 2__proto__: Array[0]
    index.html:65 
[">pollin</", "pollin", index: 193, input: "<td style="text-align: center;">31</td><td style="…6d10</td><td style="text-align: center;">323</td>"]0: ">pollin</"1: "pollin"index: 193input: "<td style="text-align: center;">31</td><td style="text-align: center;">14</td><td style="text-align: center;">on</td><td style="text-align: center;">receiver</td><td style="text-align: center;">pollin</td><td style="text-align: center;">0000-e8-de-27-176d10</td><td style="text-align: center;">323</td>"length: 2__proto__: Array[0]
    index.html:65 
[">0000-e8-de-27-176d10</", "0000-e8-de-27-176d10", index: 236, input: "<td style="text-align: center;">31</td><td style="…6d10</td><td style="text-align: center;">323</td>"]0: ">0000-e8-de-27-176d10</"1: "0000-e8-de-27-176d10"index: 236input: "<td style="text-align: center;">31</td><td style="text-align: center;">14</td><td style="text-align: center;">on</td><td style="text-align: center;">receiver</td><td style="text-align: center;">pollin</td><td style="text-align: center;">0000-e8-de-27-176d10</td><td style="text-align: center;">323</td>"length: 2__proto__: Array[0]
    index.html:65 
[">323</", "323", index: 293, input: "<td style="text-align: center;">31</td><td style="…6d10</td><td style="text-align: center;">323</td>"]0: ">323</"1: "323"index: 293input: "<td style="text-align: center;">31</td><td style="text-align: center;">14</td><td style="text-align: center;">on</td><td style="text-align: center;">receiver</td><td style="text-align: center;">pollin</td><td style="text-align: center;">0000-e8-de-27-176d10</td><td style="text-align: center;">323</td>"length: 2__proto__: Array[0]
    index.html:69 
Uncaught TypeError: Cannot read property '1' of nullparseTableNewDevice @ index.html:69(anonymous function) @ index.html:52p.event.dispatch @ jquery.min.js:2p.event.add.g.handle.h @ jquery.min.js:2

which is strange because its completely diffrent then the expected resut I'm getting from regex101.com.

If I then try to read the value of console.log(regexResultAddDevice[0]) I get Uncaught TypeError: Cannot read property '0' of null. However it should return 31.

I'm new to javascript and in php I have always done variable[0] to get the first value of the array, however this doesn't seem to work in javascript.

[You can't parse (X)HTML with regex.](http://stackoverflow.com/a/1732454/1529630) — Oriol, Jul 24 '15 at 23:08

score 3 · Accepted Answer · answered Jul 24 '15 at 23:12

Instead of using a regex for this, parse the string with DOM Parser and simply read the innerHTML:

var str = '<td style="text-align: center;">31</td><td style="text-align: center;">14</td><td style="text-align: center;">opened</td><td style="text-align: center;">receiver</td><td style="text-align: center;">elro_800_contact</td><td style="text-align: center;">0000-e8-de-27-176d10</td><td style="text-align: center;">6</td>',
    xmlString = '<tr>' + str + '</tr>', 
    parse = new DOMParser(), 
    doc = parse.parseFromString(xmlString, "text/xml");
var tds = doc.firstChild.querySelectorAll('td');

for (var i=0;i<tds.length;i++) {
  console.log(tds[i].innerHTML);
}

score 1 · Answer 2 · answered Jul 25 '15 at 00:40

You're code seems to work fine. Here's an example where it calls alert for each regexResultAddDevice[1]

function parseTableNewDevice(str) {
        var regexSearchExpression = />([^<]*)<\//g;
        var regexResultAddDevice;

        while ((regexResultAddDevice = regexSearchExpression.exec(str)) !== null) {
            if (regexResultAddDevice.index === regexSearchExpression.lastIndex) {
                regexSearchExpression.lastIndex++;
            }
            // View your result using the regexResultAddDevice-variable.
            // eg regexResultAddDevice[0] etc.
            //alert(JSON.stringify(regexResultAddDevice, null, 4));
            alert(regexResultAddDevice[1]);
        }
}

var testStr = '<td style="text-align: center;">31</td><td style="text-align: center;">14</td><td style="text-align: center;">opened</td><td style="text-align: center;">receiver</td><td style="text-align: center;">elro_800_contact</td><td style="text-align: center;">0000-e8-de-27-176d10</td><td style="text-align: center;">6</td>';
parseTableNewDevice(testStr);

That being said, I'd recommend taking the approach outlined by @michael since it will more reliably parse html and provide the info you want

regex javascript not working as expected

2 Answers2