Skip to main content

Anchors

Regular Expressions: Anchors

What are Regex Anchors in JavaScript?​

View Answer:
Interview Response: Regex Anchors in JavaScript, "^" and "$", are special characters used to match the start and end of a string respectively. They help target precise positions in pattern searches.

Can you name the two types of anchors in JavaScript Regex?​

View Answer:
Interview Response: In JavaScript Regex, there are two types of anchors: caret "^" for start-of-string or line anchor, and dollar sign "$" for end-of-string or line anchor.

What does '$' signify in JavaScript Regex?​

View Answer:
Interview Response: In JavaScript Regex, the "$" symbol is an anchor that matches the end of a string, input, or line.

Code Example:

let str1 = "Hello, world!";
let str2 = "It's a small toy!";

let regex = /world!$/;

console.log(regex.test(str1)); // Outputs: true
console.log(regex.test(str2)); // Outputs: false

Is the caret '^' inside a character set ([^]) in JavaScript Regex considered an anchor?​

View Answer:
Interview Response: No, within a character set in JavaScript Regex, the caret "^" is not an anchor. Instead, it negates the set, matching any character not specified.

Code Example:

Here's an example of how "^" is used inside a character set in JavaScript Regex:

let str = "hello world123";

// Matches any character that is NOT a letter or a space
let regex = /[^a-zA-Z\s]/g; 

let result = str.match(regex);

console.log(result);  // Output: ['1', '2', '3']

In this code, the regex [^a-zA-Z\s] matches any character that is not a letter (either lowercase 'a-z' or uppercase 'A-Z') and not a whitespace character (\s). The 'g' flag makes the search global, looking through the entire string.

How do anchors influence the global 'g' flag in JavaScript Regex?​

View Answer:
Interview Response: Anchors influence the 'g' flag in JavaScript Regex by determining where matches are sought. "^" makes the pattern match start at the string's beginning, "$" matches the end, even with global searches.

Code Example:

let regexWithoutAnchors = /apple/g;
console.log(str.match(regexWithoutAnchors)); 
// Outputs: [ 'apple', 'apple', 'apple' ]

let regexWithAnchors = /^apple$/g;
console.log(str.match(regexWithAnchors)); 
// Outputs: null

///////////////////////////////////////

let str2 = "apple";

let regexWithAnchors2 = /^apple$/g;
console.log(str2.match(regexWithAnchors2)); 
// Outputs: ["apple"]

How does JavaScript handle '^' and '$' anchors in multiline mode?​

View Answer:
Interview Response: In multiline mode, the "^" and "$" anchors in JavaScript Regex match the start and end of each line, respectively, rather than just the start or end of the entire string.

Code Example:

let str = "apple\nbanana\napple";

let regexWithoutM = /^apple$/g;
console.log(str.match(regexWithoutM)); 
// Outputs: null (Without "m" flag)

let regexWithM = /^apple$/gm;
console.log(str.match(regexWithM)); 
// Outputs: [ 'apple', 'apple' ] (With "m" flag)

In this example, ^apple$ doesn't match anything because without the "m" flag, it expects the entire string to be "apple". However, with the "m" flag, ^apple$ matches each line where "apple" is the only content. Hence, it matches the first and the third lines.

How do anchors affect the performance of JavaScript Regex?​

View Answer:
Interview Response: Anchors can improve the performance of JavaScript Regex by limiting the search space, reducing unnecessary checks, and enabling faster failure when a match is not possible.

What do the caret ^ and dollar sign $ represent in regular expressions?​

View Answer:
Interview Response: The caret '^' represents the start of a line or string, and the dollar sign '$' represents the end in regular expressions.

Technical Response: The caret ^ and dollar $ characters have special meaning in a regexp. They are called anchors. The caret ^ matches at the beginning of the text, and the dollar $ represents the end. You should note that we could use the startsWith and endsWith methods to perform the same task, which is the recommendation. We use regular expressions for more complex tests in JavaScript.

Code Example:

let str1 = 'Mary had a little lamb';
console.log(/^Mary/.test(str1)); // true

let str2 = "it's fleece was white as snow";
console.log(/snow$/.test(str2)); // true

What approach should we use to test for a full match in RegExp?​

View Answer:
Interview Response: To test for a full match in RegExp, we should surround the pattern with '^' (start anchor) and '$' (end anchor).

Technical Details: Both anchors, caret, and dollar sign, together ^...$ often get used in testing whether a string fully matches the pattern. For instance, check if the user input is in the proper format.

Code Example:

let goodInput = '12:34';
let badInput = '12:345';

let regexp = /^\d\d:\d\d$/;
console.log(regexp.test(goodInput)); // true
console.log(regexp.test(badInput)); // false

What does it mean that Anchors (caret/dollar sign) have zero width?​

View Answer:
Interview Response: Anchors having zero width means they match a position in the input string, not the actual characters. They don't consume any characters. They do not match a character but instead force the regexp engine to check the condition (text start/end).