How to change regex pattern from textbox?

Question

How I could set the variable pat to act as variable patt1? I want write in the textbox just "abe" and change from var patt1 = /\b[abc]+\b/g; to var patt1 = /\b[abe]+\b/g;. Is that possible?

<html>
    <body onload="onload();">


    <input type="text" id="lol"/>
    <input type="button" VALUE="Resitve" onclick="myFunction();"/>

    <p id="alert"></p>

    <script>
    var pat;


    function myFunction() {
        pat = document.getElementById("lol").value;

        var str = "abc ab abe abeee";
        var patt1 = /\b[abc]+\b/g;

        var result = str.match(pat);
        document.getElementById("alert").innerHTML = result;
    }
    </script>

    </body>
    </html>

Your regex can be in string form. Just pass the regex to the match function as a concatenated string instead. — jonny, Oct 30 '15 at 15:39

score 0 · Answer 1 · answered Oct 30 '15 at 15:42

From the String.prototype.match() docs

str.match(regexp)

regexp

If a non-RegExp object obj is passed, it is implicitly converted to a RegExp by using new RegExp(obj).

So, passing your regex as a concatenated string should work fine. i.e., instead of this:

var patt1 = /\b[abc]+\b/g;

Use this:

var patt1 = "/\b[abc]+\b/g";

And amend that string as you see fit!

Racil Hilan · Accepted Answer · 2015-10-30T17:05:04.647

You can use the RegExp object:

<html>
    <body onload="onload();">


    <input type="text" id="lol"/>
    <input type="button" VALUE="Resitve" onclick="myFunction();"/>

    <p id="alert"></p>

    <script>
    var pat;


    function myFunction() {
        pat = document.getElementById("lol").value;

        var str = "abc ab abe abeee";
        var patt1 = new RegExp("\\b[" + pat + "]+\\b","g");

        var result = patt1.exec(str);
        document.getElementById("alert").innerHTML = result;
    }
    </script>

    </body>
    </html>

Or you can simply make the pattern in your code as string:

<html>
    <body onload="onload();">


    <input type="text" id="lol"/>
    <input type="button" VALUE="Resitve" onclick="myFunction();"/>

    <p id="alert"></p>

    <script>
    var pat;


    function myFunction() {
    pat = document.getElementById("lol").value;

    var str = "abc ab abe abeee";
    var patt1 = "\\b[" + pat + "]+\\b";

    var result = str.match(patt1);
    document.getElementById("alert").innerHTML = result;
    }
    </script>

    </body>
    </html>

If you want to truly find all matches, you will need to call the exec function in a loop:

<html>
    <body onload="onload();">


    <input type="text" id="lol"/>
    <input type="button" VALUE="Resitve" onclick="myFunction();"/>

    <p id="alert"></p>

    <script>
    var pat;


    function myFunction() {
        pat = document.getElementById("lol").value;

        var str = "abc ab abe abeee";
        var patt1 = new RegExp("\\b[" + pat + "]+\\b","g");

        var result;
        var display = document.getElementById("alert");
        display.innerHTML = "";
        while(result = patt1.exec(str)){
            display.innerHTML += result + "<br/>";
        }
    }
    </script>

    </body>
    </html>

Thank you very much! This solved my problem and bring a new one. This work only for first string in "var str..". I want a combination of all. — roda, Oct 30 '15 at 16:21
You just need to find the matches in a loop. See my updated answer. — Racil Hilan, Oct 30 '15 at 17:05

How to change regex pattern from textbox?

2 Answers2