Converting user input strings with Special characters to regular expression

Question

Note: there was a similar question but since it didn't have 'Special characters' and the problem here is only with 'Special characters', I posted a new question.

I have a list (from user input textarea) of Regular Expression representations:

Example: (simplified)

// starting point is a string like this one
let str = `/ab+c/
/Chapter (\d+)\.\d*/
/\d+/
/d(b+)d/`;

I need to convert them into an array to check (for validity) and prepare each line e.g. (simplified)

let arr = str.split(/[\r\n]+/);

for (let i = 0, len = arr.length; i < len; i++) {

  arr[i] = arr[i].slice(1, -1); // removing the start/end slashes
  // problem with double slashing the Special characters
  // it doesn't give the required result
  arr[i] = arr[i].replace(/\\/g, '\\$&');
  // same result with replace(/\\/g, '\\\\')
}

Finally, convert them into one RegEx object

let regex = new RegExp(arr.join('|'), 'i'); 

console.log(regex.test('dbbbd')); // true
console.log(regex.test('256')); // false

I must be missing something here.

Update
I missed the point that the data that comes from a textarea (or similar) doesn't need to be escaped at all. When I was testing the code, I was testing it like above which didn't work.

RegExp objects are not string type. First you have to do like /\d+/.toString(); or use type coercion like myRegExpObj + "" and then perform string operations. — Redu
– Redu, Commented Sep 30, 2017 at 11:35
Since the strings are already regular expressions, you just don’t need to replace anything. You would need to do so only if you wanted special characters to be matched literally, which is not the case here. — jcaron
– jcaron, Commented Sep 30, 2017 at 11:57
From where do you receive this string of regexps..? I guess if the string is thought to represent regexps then all \ characters should have been escaped like \\ to start with. — Redu
– Redu, Commented Sep 30, 2017 at 12:19
If you check, they are already strings and not objects. They are either strings or regexp objects (aka normal regexp). If the regexps are represented by a template literal just like in your example... then the "\" characters must be escaped like "\\" — Redu
– Redu, Commented Sep 30, 2017 at 12:58
@erosman no, new RegExp() doesn’t need double \ if you actually want the regular expression meaning (e.g \d for digits). It’s the string literal that needs it, because \ is used there for some escape sequences such as \n and quite a few more. Do in your original code, you should have \\ in the string, but not manipulate it afterwards. If the regex comes from somewhere else (HTML input, JSON...) then you don’t need to do anything at all. — jcaron
– jcaron, Commented Oct 1, 2017 at 13:28

Redu · Accepted Answer · 2017-09-30 15:10:55Z

1

Lets use the "change" event on <textarea> so that once the user changes the content and clicks outside, we just access the value property of it we can then construct the composite RegExp object. I haven't had the need to escape the \ characters at all.

Just copy paste the following to the text area and click outside.

/ab+c/
/Chapter (\d+)\./
/\d+/
/d(b+)d/

var myTextarea = document.getElementById("ta");

myTextarea.addEventListener("change", function(e) {
  var str = e.currentTarget.value.split(/[\r\n]+/)
                                 .map(s => s.slice(1, -1))
                                 .join("|");
      rgx = new RegExp(str, "i")
  console.log(`Derived RegExp object: ${rgx}`);
  console.log(`Testing for 'dbbbd': ${rgx.test('dbbbd')}`); // true
  console.log(`Testing for '256': ${rgx.test('256')}`);     // true
});

#ta {
  width: 33vw;
  height: 50vh;
  margin-left: 33vw;
}

<textarea id="ta"></textarea>

answered Sep 30, 2017 at 15:10

Redu

26.3k6 gold badges61 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Redu Over a year ago

@erosman I showed it in <textarea> since you have mentioned it in one of your comments. It works well with <textarea> and '256' returns true in the above code. Could you please tell me from where exactly this string is originated..?

erosman Over a year ago

Actually, I was wrong. The data from textarea works without the need to escape it but it doesn't work when I try it is a code string :(

Redu Over a year ago

@erosman I understand <textarea> "automatically" escapes the special characters so that when we console.log() it's value property the string looks normal. You can store that string in the localStorage and retrieve and it will be kept the same. So when you construct a string manually in your code from scratch, you should add \ characters by doing myText + "\\" or by myText + String.fromCharCode(92). On the other hand, any string that you receive from an API call, if looks proper when you console.log(), has already escaped backslashes just like a string from <textarea>.

erosman Over a year ago

You are correct.... and I missed that completely. :p I was testing using string literals instead of testing using the real situation and therefore I missed it. I also missed the point that textarea, input, & storage data are not process as string literals even after getting assigned to a variable. Sorry for my confusion.

Collectives™ on Stack Overflow

Converting user input strings with Special characters to regular expression

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related