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?
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
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; }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}\\)`);