Javascript中的交互式正则表达式部分不处理复杂的正则表达式

时间:2016-12-04 20:12:45

标签: javascript regex

在阅读之前,请注意我已经检查了这些解决方案无济于事: JavaScript backslash (\) in variables is causing an errorRegExp range out of order with complex pattern

后者与我遇到的问题相同(来自Chrome调试器的消息):

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

我正在尝试在javascript中创建交互式正则表达式部分,但对于复杂的正则表达式,我得到上述错误。

这是我的javascript代码:

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

在上面的代码中,我认为问题在于我没有逃避我的反斜杠,但我不认为这是一个问题,我认为这是引号让我搞砸了但是我的RegExp构造函数接受一个字符串,所以我怀疑这是问题所在。有没有其他人有任何解决方案?我将尝试将输入字符串放在两个反斜杠之间,如下所示:

newExp = / + newExp + /;

但我只是出于绝望而尝试这个,我认为它不会起作用。任何关于可能是什么问题的反馈都会非常感激。

这是我的HTML代码,随时可以复制/粘贴等等:

<!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>

任何反馈都会有所帮助,谢谢。

1 个答案:

答案 0 :(得分:1)

你的角色类中有角色-,正则表达式引擎认为你的意思是.)之间的范围,这是不可能的。

要解决此问题,请转义-或将其放在角色类的最后,就在]

之前