How to pass a variable into the regex expression in javascript?

Question

I'm making a list search tool to check for a specific name in a long list. I have been successful at hard coding the name into the regex, but I need it to be dynamic. Here is the code:

    function processString(){
  document.getElementById('textArea').value = "";
  var inputString = document.getElementById('textBox').value;
  var userIn = document.getElementById('userInput').value;
  var regex = //use variable 'userIn' for regex
  $('#textArea').html(result);

  if(result != null){
    for(var i = 0; i < result.length; i++){
      document.getElementById('textArea').value += result[i] + '\r\n';
    }
  }

}

codepen

Can you show us the _entire_ code which is making use of this regex? — Tim Biegeleisen, Aug 12 '18 at 02:42

score 0 · Answer 1 · answered Aug 12 '18 at 02:48

First, you need to escape the user input so that the regex engine will interpret it literally. From this answer, we can write a function like this:

  RegExp.escape= function(s) {
      return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
  };

Then, we can create the regex. I assume you want to use a regex like this since you want to search for names:

\b<user input here>\b

You can concatenate the strings

var regex = new RegExp("\\b" + RegExp.escape(userIn) + "\\b", "g");

Full code:

function processString(){
  RegExp.escape= function(s) {
    return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
};
  document.getElementById('textArea').value = "";
  var inputString = document.getElementById('textBox').value;
  var userIn = document.getElementById('userInput').value;
  var regex = new RegExp("\\b" + RegExp.escape(userIn) + "\\b", "g");
  
  var result = inputString.match(regex);
  $('#textArea').html(result);
  
  if(result != null){
    for(var i = 0; i < result.length; i++){
      document.getElementById('textArea').value += result[i] + '\r\n';
    }
  }
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>List of Names</p><input type="text" id='textBox' style='width:250px;'>
<br><br>
<p>name to search for</p><input type="text" id='userInput' style='width:250px;'>
<br><br>
<input type="button" value='search' style='width:250px;' onclick='processString()'>
<br><br>
<textarea name="area" id="textArea" cols="30" rows="10"></textarea>

score -1 · Answer 2 · answered Aug 12 '18 at 02:47

You can create a new RegExp by instantiating a RegExp object like so:

var regex = new RegExp(userIn, "ig"); //use variable 'userIn' for regex

The first parameter is the value passed in from userInput, the second is the flags. i means case-insensitive, g means global (check the whole string, don't stop after finding the first match)

To use the regex to check the name against the list, use:

  var match = inputString.match(regex);

This will return all the matches of regex in inputString

function processString() {
  document.getElementById('textArea').value = "";
  var inputString = document.getElementById('textBox').value;
  var userIn = document.getElementById('userInput').value;
  var regex = new RegExp(userIn, "ig"); //use variable 'userIn' for regex
  var match = inputString.match(regex);
  if (match !== null) {
    for (var i = 0; i < match.length; i++) {
      document.getElementById('textArea').value += match[i] + '\r\n';
    }
  }

}

<p>List of Names</p><input type="text" id='textBox' style='width:250px;'>
<br><br>
<p>name to search for</p><input type="text" id='userInput' style='width:250px;'>
<br><br>
<input type="button" value='search' style='width:250px;' onclick='processString()'>
<br><br>
<textarea name="area" id="textArea" cols="30" rows="10"></textarea>

How to pass a variable into the regex expression in javascript?

2 Answers2