Interactive Regular Expressions Section in Javascript not processing complex regular expressions

Question

Before reading, note that I have already checked out these solution to no avail: JavaScript backslash (\) in variables is causing an error and RegExp range out of order with complex pattern

The latter is the same problem I am having (messsage from Chrome debugger):

Uncaught SyntaxError: Invalid regular expression: /^[\\.-)( ]*([0-9]{3})[\\.-)( ]*([0-9]{3})[\\.-)( ]*([0-9]{4})$/: Range out of order in character class
    at new RegExp (<anonymous>)

I am trying to create an interactive regular expression section in javascript but for complex regular expressions I get the above error.

Here is my javascript code:

var bodies = document.getElementsByTagName("body");
var body = bodies[0];

var maxLengthText = 500;
var numCol = 40;
var numRow = 10;

var testAreaDiv = document.createElement("div");
testAreaDiv.style.display = "table-row";

var regExArea = document.createElement("textArea");
regExArea.maxLength= maxLengthText;
regExArea.cols= numCol;
regExArea.rows = numRow;
regExArea.style.display = "table-cell";
regExArea.placeholder = "Enter regular expressions here";

var testTextArea = document.createElement("textArea");
testTextArea.maxLength = maxLengthText;
testTextArea.cols = numCol;
testTextArea.rows = numRow; 
testTextArea.display = "table-cell";
testTextArea.placeholder = "Enter Text here";

var submitButton = document.createElement("button");
submitButton.innerHTML = "TestRegEx";
submitButton.type = "Submit";

var result = document.createElement("div");

var br = document.createElement("br");

submitButton.onclick = function(){
    var exp = regExArea.value;
    var expArr = exp.split("\\");
    var newExp = "";
    for(var $i=0; $i<expArr.length-1; $i++){
        newExp += expArr[$i] + "\\\\";
    }
    newExp += expArr[expArr.length-1];
    console.log(newExp);
    var patt = new RegExp(newExp);
    console.log(testTextArea.value);
    var res = patt.exec(testTextArea.value);
    result.innerHTML = "<p>" + res + "</p>";
}

testAreaDiv.appendChild(regExArea);
testAreaDiv.appendChild(testTextArea);
testAreaDiv.appendChild(br);
testAreaDiv.appendChild(submitButton);
testAreaDiv.appendChild(result);


body.appendChild(testAreaDiv);

In the code above I thought that the problem was that I wasn't escaping my backslashes but I don't think that was a problem, I assumed that it was the quotation marks that was messing me up but I the RegExp constructor takes a string so I doubt that's the problem. Does anyone else have any solutions? I going to attempt to put the input string between 2 backslashes like so:

newExp = / + newExp + /;

But I am only trying this out of desperation, I don't think it will work. Any feedback as to what might be the problem would be really appreciated.

Here is my HTML code, feel free to copy/paste etc.:

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
        <link rel="apple-touch-icon" href="apple-touch-icon.png">

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
        <!--<link rel="stylesheet" href="css/main.css"> -->
    </head>
    <body>
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <!-- Add your site or application content here -->

        <h1> Test Area</h1>


        <script src="assets/js/testSection.js" type="text/javascript" charset="utf-8" async defer></script>
        <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.4.min.js"><\/script>')</script>

        <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
        <script>
            window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
            ga('create','UA-XXXXX-Y','auto');ga('send','pageview')
        </script>
        <script src="https://www.google-analytics.com/analytics.js" async defer></script>
    </body>
</html>

Any feedback will help, thanks.

See [*Range out of order in character class in javascript*](http://stackoverflow.com/questions/17727884/range-out-of-order-in-character-class-in-javascript). You failed to escape the `-` inside `[...]`. Or it should be placed at the start/end of the character class. — Wiktor Stribiżew, Dec 04 '16 at 20:14
@WiktorStribiżew Ah yes, thank you, you and the below comment pointed out this error. — Q.H., Dec 04 '16 at 20:27

score 1 · Accepted Answer · answered Dec 04 '16 at 20:18

1

You have the character - in your Character class, and the regex engine thinks you mean a range betweeen . and ) which is impossible.

To fix this, either escape your - or put it at the very end of the character class, just before the ]

answered Dec 04 '16 at 20:18

Max

1,325
9
20

Will I need to escape all characters? Or just ones that are part of the regular expressions syntax? – Q.H. Dec 04 '16 at 20:21
1

You just need to escape the `-` character. Everything else in your pattern has been escaped correctly. – Max Dec 04 '16 at 20:23

Interactive Regular Expressions Section in Javascript not processing complex regular expressions

1 Answers1