Regex expression not returning entire term-CodePudding

The intention of the regex is to capture substrings wrapped between twin expressions in parentheses, kinda like html tags. For example:

<p id="textTwo">And this shall be (blue)the ocean(blue) and this shall also be like (blue)the ocean(blue)</p>

And here's my code

let color = 'blue';
let getColor = 
    new RegExp(`(${color})(.*)(${color})`);
let coloredText = textTwo.match(getColor);

let text = document.getElementById('text').innerText;
let textTwo = document.getElementById('text2').innerText;

let color = 'blue';
let getColor = 
    new RegExp(`(${color})(.*)(${color})`);
let coloredText = textTwo.match(getColor);
// italicsText.forEach((string, index) => {
//   string.replace("(i)", "<i>");
//   console.log(typeof(string));
// });
// text.replace(italics, "<i>");

let italics = text.replace(/\((.*?)\)/g, (_, match) => `<${match}>`);
console.log(italics);


console.log(italics);
console.log(coloredText);

<p id="text">Hello there (i)Good Sir(i). How can I help you (i)today(i)</p>

<p id="text2">And this shall be (blue)ao!(blue) and this shall also be (blue)like the ocean(blue)</p>

Can anyone tell me why this doesn't capture the entire thing?

CodePudding user response：

The characters () are special in a regexp and must be escaped with a \ if you want to match them literally. And because \ in a JavaScript string literal is also special, it needs to be escaped with another \:

    let color = 'blue';
    let getColor = 
        new RegExp(`\\(${color}\\)(.*)\\(${color}\\)`);

CodePudding user response：

The regex for the '(blue)' specific case would be ... /\(blue\)(?<colored>.*?)\(blue\)/g.

The above regex literal does (needs to) escape regex specific characters like ( and ) for they have special meaning like for the latter two marking a capturing group.

In order to dynamically match/capture color value related patterns one needs to utilize

Template literals
and the RegExp constructor.

In comparison to the regex literal one does provide a string based pattern parameter to the RegExp constructor where one needs to escape the pattern's escape characters (\ to '\\').

const sampleText =
 'And this shall be (blue)the ocean(blue) and this shall also be like (blue)another ocean(blue)';

const sampleColor = 'blue';

// see ... [https://regex101.com/r/eHCaWJ/1]
// ... /\(blue\)(?<colored>.*?)\(blue\)/g

const regExpColored =
  RegExp(`\\(${ sampleColor }\\)(?<colored>.*?)\\(${ sampleColor }\\)`, 'g');

console.log(
  'all matches ...',
  sampleText
    .match(regExpColored)
)
console.log(
  'any capture ...',
  Array
    .from(
      sampleText
        .matchAll(regExpColored)
    )
    .map(({ groups: { colored }}) => colored)
)

.as-console-wrapper { min-height: 100%!important; top: 0; }