Javascript: Escaping character issue in a string for RegExp? [duplicate] - javascript

This question already has answers here:
JavaScript Regex, where to use escape characters?
(3 answers)
Closed 8 years ago.
I am having a small issue with placing a RegExp pattern inside a string, I have 2 patterns which are both really the same. The first doesn't work I presume due to the \d - is it being seen as an escape character?
var pattern = '^.{1,5}-\d{1,5}$'; // Doesn't work
var pattern = '^[a-zA-Z]{1,5}-[0-9]{1,5}$'; // Works
Is there anyway around this ? apart from replacing the \d with [0-9]?
Here is the extra code I am using
var regex = new RegExp(pattern);
var result = regex.test(value);
Thanks in advance

As found in the documentation you have several different ways to create a RegExp
Regular expression literal,
var regex = /^.{1,5}-\d{1,5}$/;
Constructor function of the RegExp object
var regex = new RegExp("^.{1,5}-\\d{1,5}$");
since it is a string, you need to escape any \
Same for \w and other backslashed chars
The second version is mostly used if you have variables you need to add to the regexp

If you want the way your are writing the regex to work, you can double escape the d:
var pattern = '^.{1,5}-\\d{1,5}$'; // Should work
var regex = new RegExp(pattern);
Otherwise, you can use the regex directly using the delimiters /:
var pattern = /^.{1,5}-\d{1,5}$/;
In the first instance, you are storing the pattern in a string, and the actual characters that are being passed to the variables are: ^.{1,5}-\d{1,5}$ because \d has no meaning in a string, but \\d is a backslash and a literal d. You can try putting a backslash in a string:
console.log('\'); // Won't run
console.log(' \ '); // Returns a space
console.log('\n'); // Returns a newline character
So that if you mean a literal backslash, you have to escape it.
Using:
var pattern = '^.{1,5}-\\d{1,5}$'; // Should work
var regex = new RegExp(pattern);
should be faster though, if you are using the regex several times, because here, you are compiling the regex so that you can use it multiple times.
The other way will require compiling the regex each time it is called for.

Related

How can I place newlines in my regex to make it more readable? [duplicate]

This question already has answers here:
Commenting Regular Expressions
(7 answers)
Closed 4 years ago.
I have a really long email-matching regex in JavasScript that I would like to break into multiple lines without changing the regex functionality. I know some regex engines offer a way to insert newlines for readability, is there a way to do that in JS?
There's no built-in way to accomplish such a thing, but it's not hard to accomplish it yourself. You can use a template literal with String.raw, which will allow you to use newlines in the regex string, without having to double-escape backslashes, and then you can replace all newlines with the empty string before passing it to new RegExp:
const patternStr = String.raw`^
[fg]oo
=
\war`;
const pattern = new RegExp(patternStr.replace(/\n/g, ''));
console.log(pattern.test('foo=bar'));
console.log(pattern.test('goo=bar'));
console.log(pattern.test('hoo=bar'));
You can use a similar technique to allow comments as well:
const patternStr = String.raw`
^ // Match the beginning of the string
[fg]oo // Match either f or g, followed by oo
= // Match an equals sign
\war // Match a word character, followed by "ar"
`;
const pattern = new RegExp(
patternStr.replace(/(?: *\/\/.*)?\n/g, '')
);
console.log(pattern.test('foo=bar'));
console.log(pattern.test('goo=bar'));
console.log(pattern.test('hoo=bar'));
The (?: *\/\/.*)?\n pattern means:
(?: *\/\/.*)? - An optional group of zero or more spaces, followed by //, followed by non-newline characters
\n - followed by a newline
Of course, this means it'll be impossible to write // as is in the regex, but that's OK, you can just escape forward slashes just like you do with regular expression literals (it'll be parsed by the RegExp constructor as an unnecessary escape character):
const patternStr = String.raw`
^ // Match the beginning of the string
\/\/ // Match two literal forward slashes
`;
const pattern = new RegExp(
patternStr.replace(/(?: *\/\/.*)?\n/g, '')
);
console.log(pattern.test('//foo'));
console.log(pattern.test('foo'));
Another way would be to allow literal //s in the template literal by, when matching the comment // <text> \n, make sure that <text> doesn't have any //s in it. This would mean that only the final // on a line would be parsed as a comment, allowing you to use //s earlier on the line, without escaping, without problems, by using (?:(?!\/\/).)* instead of .*:
const patternStr = String.raw`
^ // Match the beginning of the string
// // Match two literal forward slashes
`;
const pattern = new RegExp(
patternStr.replace(/(?: *\/\/(?:(?!\/\/).)*)?\n/g, '')
);
console.log(pattern.test('//foo'));
console.log(pattern.test('foo'));
Of course, this will mean that //s will only be parsed as actual double-forward-slashes in the regex if there's another // farther right in the line. (If there isn't another // later, you'll have to use \/\/ instead)

How to match with new RegExp exactly [duplicate]

This question already has answers here:
Backslashes - Regular Expression - Javascript
(2 answers)
Closed 5 years ago.
I have this string:
var str = "https://www.mysite.se/this-match?ba=11"
I need to match it exactly (between / and ?), so only this-match matches, not this-ma or anything (shorter) that is contained in this-match.
I.e:
var myre = new RegExp('\/this-ma\?');
Still matches:
myre.exec(str)[0]
"/this-ma"
How can I avoid that a shorter string contained in this-match does give a match?
The definition of your regex is wrong. You'd think that \? would match literal ? character, instead of being non-greedy modifier. Not true. Quite the opposite, in fact.
var myre = new RegExp('\/this-ma\?');
> /\/this-ma?/
The backslash here works within the string literal, and outputs single ? to regex, which becomes non-greedy modifier. Use the regex literal.
var myre = /\/this-ma\?/

Why does this regular expression evaluate to false in javascript?

I'm looking for a string that is 0-9 digits, no other characters.
This is alerting me with a "false" value:
var regex = new RegExp('^[\d]{0,9}$');
alert(regex.test('123456789'));
These return true, and I understand why (The ^ and $ indicate that the whole string needs to match, not just a match within the string) :
var regex = new RegExp('[\d]{0,9}');
alert(regex.test('123456789'));
-
var regex = new RegExp('[\d]{0,9}');
alert(regex.test('12345678934341243124'));
and this returns true:
var regex = new RegExp('^[\d]{0,9}');
alert(regex.test('123456789'));
So why, when I add the "$" at the end would this possibly be failing?
And what do I need to do to fix it?
When you use
var regex = new RegExp('^[\d]{0,9}$');
syntax, you'll get regex as
/^[d]{0,9}$/
Note the \d is turned into d.
This regex /^[d]{0,9}$/ will match only the d zero to nine times.
RegExp uses string to define regex, the \ is also used as escape symbol in the string, so \ in \d is considered as the escape character.
Escape the \ by preceding it with another \.
var regex = new RegExp('^[\\d]{0,9}$');
I'll recommend you to use regex literal syntax rather than the confusing RegExp syntax.
var regex = /^\d{0,9}$/;
EDIT:
The reason you get true when using var regex = new RegExp('^[\d]{0,9}'); is because the regex implies that the string should start with any number of d include zero to nine. So, event when the string does not starts with d the condition is stratified because of 0 as the minimum no of occurrences.
You might want to check if the string starts with one to nine digits.
var regex = /^\d{1,9}$/;
You should use the regular expression literal (without quotes and using the beginning and ending slashes) when defining the RegExp object. This is the recommended approach when the regular expression will remain constant, meaning it does not need to be compiled every time it is used. This gives you the desired result:
var regex = new RegExp(/^[\d]{0,9}$/);
Because $ means End of line, and your string does not have an end of line as last character
May be you are looking for "\z"

build Regex string with js

<script>
var String = "1 Apple and 13 Oranges";
var regex = /[^\d]/g;
var regObj = new RegExp(regex);
document.write(String.replace(regObj,''));
</script>
And it works fine - return all the digits in the string.
However when I put quote marks around the regex like this:
var regex = "/[^\d]/g"; This doesn't work.
How can I turn a string to a working regex in this case?
Thanks
You can create regular expressions in two ways, using the regular expression literal notation, or RegExp constructor. It seems you have mixed up the two. :)
Here is the literal way:
var regex = /[^\d]/g;
In this case you don't have use quotes. / characters at the ends serve as the delimiters, and you specify the flags at the end.
Here is how to use the RegExp constructor, in which you pass the pattern and flags (optional) as string. When you use strings you have to escape any special characters inside it using a '\'.
Since the '\' (backslash) is a special character, you have to escape the backslash using another backslash if you use double quotes.
var regex = new RegExp("[^\\d]", "g");
Hope this makes sense.
As slash(\) has special meaning for strings (e.g. "\n","\t", etc...), you need to escape that simbol, when you are passing to regexp:
var regex = "[^\\d]";
Also expression flags (e.g. g,i,etc...) must be passed as separate parameter for RegExp.
So overall:
var regex = "[^\\d]";
var flags = "g";
var regObj = new RegExp(regex, flags);

Building regexp from JS variables not working

I am trying to build a regexp from static text plus a variable in javascript. Obviously I am missing something very basic, see comments in code below. Help is very much appreciated:
var test_string = "goodweather";
// One regexp we just set:
var regexp1 = /goodweather/;
// The other regexp we built from a variable + static text:
var regexp_part = "good";
var regexp2 = "\/" + regexp_part + "weather\/";
// These alerts now show the 2 regexp are completely identical:
alert (regexp1);
alert (regexp2);
// But one works, the other doesn't ??
if (test_string.match(regexp1))
alert ("This is displayed.");
if (test_string.match(regexp2))
alert ("This is not displayed.");
First, the answer to the question:
The other answers are nearly correct, but fail to consider what happens when the text to be matched contains a literal backslash, (i.e. when: regexp_part contains a literal backslash). For example, what happens when regexp_part equals: "C:\Windows"? In this case the suggested methods do not work as expected (The resulting regex becomes: /C:\Windows/ where the \W is erroneously interpreted as a non-word character class). The correct solution is to first escape any backslashes in regexp_part (the needed regex is actually: /C:\\Windows/).
To illustrate the correct way of handling this, here is a function which takes a passed phrase and creates a regex with the phrase wrapped in \b word boundaries:
// Given a phrase, create a RegExp object with word boundaries.
function makeRegExp(phrase) {
// First escape any backslashes in the phrase string.
// i.e. replace each backslash with two backslashes.
phrase = phrase.replace(/\\/g, "\\\\");
// Wrap the escaped phrase with \b word boundaries.
var re_str = "\\b"+ phrase +"\\b";
// Create a new regex object with "g" and "i" flags set.
var re = new RegExp(re_str, "gi");
return re;
}
// Here is a condensed version of same function.
function makeRegExpShort(phrase) {
return new RegExp("\\b"+ phrase.replace(/\\/g, "\\\\") +"\\b", "gi");
}
To understand this in more depth, follows is a discussion...
In-depth discussion, or "What's up with all these backslashes!?"
JavaScript has two ways to create a RegExp object:
/pattern/flags - You can specify a RegExp Literal expression directly, where the pattern is delimited using a pair of forward slashes followed by any combination of the three pattern modifier flags: i.e. 'g' global, 'i' ignore-case, or 'm' multi-line. This type of regex cannot be created dynamically.
new RegExp("pattern", "flags") - You can create a RegExp object by calling the RegExp() constructor function and pass the pattern as a string (without forward slash delimiters) as the first parameter and the optional pattern modifier flags (also as a string) as the second (optional) parameter. This type of regex can be created dynamically.
The following example demonstrates creating a simple RegExp object using both of these two methods. Lets say we wish to match the word "apple". The regex pattern we need is simply: apple. Additionally, we wish to set all three modifier flags.
Example 1: Simple pattern having no special characters: apple
// A RegExp literal to match "apple" with all three flags set:
var re1 = /apple/gim;
// Create the same object using RegExp() constructor:
var re2 = new RegExp("apple", "gim");
Simple enough. However, there are significant differences between these two methods with regard to the handling of escaped characters. The regex literal syntax is quite handy because you only need to escape forward slashes - all other characters are passed directly to the regex engine unaltered. However, when using the RegExp constructor method, you pass the pattern as a string, and there are two levels of escaping to be considered; first is the interpretation of the string and the second is the interpretation of the regex engine. Several examples will illustrate these differences.
First lets consider a pattern which contains a single literal forward slash. Let's say we wish to match the text sequence: "and/or" in a case-insensitive manner. The needed pattern is: and/or.
Example 2: Pattern having one forward slash: and/or
// A RegExp literal to match "and/or":
var re3 = /and\/or/i;
// Create the same object using RegExp() :
var re4 = new RegExp("and/or", "i");
Note that with the regex literal syntax, the forward slash must be escaped (preceded with a single backslash) because with a regex literal, the forward slash has special meaning (it is a special metacharacter which is used to delimit the pattern). On the other hand, with the RegExp constructor syntax (which uses a string to store the pattern), the forward slash does NOT have any special meaning and does NOT need to be escaped.
Next lets consider a pattern which includes a special: \b word boundary regex metasequence. Say we wish to create a regex to match the word "apple" as a whole word only (so that it won't match "pineapple"). The pattern (as seen by the regex engine) needs to be: \bapple\b:
Example 3: Pattern having \b word boundaries: \bapple\b
// A RegExp literal to match the whole word "apple":
var re5 = /\bapple\b/;
// Create the same object using RegExp() constructor:
var re6 = new RegExp("\\bapple\\b");
In this case the backslash must be escaped when using the RegExp constructor method, because the pattern is stored in a string, and to get a literal backslash into a string, it must be escaped with another backslash. However, with a regex literal, there is no need to escape the backslash. (Remember that with a regex literal, the only special metacharacter is the forward slash.)
Backslash SOUP!
Things get even more interesting when we need to match a literal backslash. Let's say we want to match the text sequence: "C:\Program Files\JGsoft\RegexBuddy3\RegexBuddy.exe". The pattern to be processed by the regex engine needs to be: C:\\Program Files\\JGsoft\\RegexBuddy3\\RegexBuddy\.exe. (Note that the regex pattern to match a single backslash is \\ i.e. each must be escaped.) Here is how you create the needed RegExp object using the two JavaScript syntaxes
Example 4: Pattern to match literal back slashes:
// A RegExp literal to match the ultimate Windows regex debugger app:
var re7 = /C:\\Program Files\\JGsoft\\RegexBuddy3\\RegexBuddy\.exe/;
// Create the same object using RegExp() constructor:
var re8 = new RegExp(
"C:\\\\Program Files\\\\JGsoft\\\\RegexBuddy3\\\\RegexBuddy\\.exe");
This is why the /regex literal/ syntax is generally preferred over the new RegExp("pattern", "flags") method - it completely avoids the backslash soup that can frequently arise. However, when you need to dynamically create a regex, as the OP needs to here, you are forced to use the new RegExp() syntax and deal with the backslash soup. (Its really not that bad once you get your head wrapped 'round it.)
RegexBuddy to the rescue!
RegexBuddy is a Windows app that can help with this backslash soup problem - it understands the regex syntaxes and escaping requirements of many languages and will automatically add and remove backslashes as required when pasting to and from the application. Inside the application you compose and debug the regex in native regex format. Once the regex works correctly, you export it using one of the many "copy as..." options to get the needed syntax. Very handy!
You should use the RegExp constructor to accomplish this:
var regexp2 = new RegExp(regexp_part + "weather");
Here's a related question that might help.
The forward slashes are just Javascript syntax to enclose regular expresions in. If you use normal string as regex, you shouldn't include them as they will be matched against. Therefore you should just build the regex like that:
var regexp2 = regexp_part + "weather";
I would use :
var regexp2 = new RegExp(regexp_part+"weather");
Like you have done that does :
var regexp2 = "/goodweather/";
And after there is :
test_string.match("/goodweather/")
Wich use match with a string and not with the regex like you wanted :
test_string.match(/goodweather/)
While this solution may be overkill for this specific question, if you want to build RegExps programmatically, compose-regexp can come in handy.
This specific problem would be solved by using
import {sequence} from 'compose-regexp'
const weatherify = x => sequence(x, /weather/)
Strings are escaped, so
weatherify('.')
returns
/\.weather/
But it can also accept RegExps
weatherify(/./u)
returns
/.weather/u
compose-regexp supports the whole range of RegExps features, and let one build RegExps from sub-parts, which helps with code reuse and testability.

Categories

Resources