正则表达式：检测字符串插值但不检测内部属性

Question

I am working on creating Web Components and I need a Regular Expression that captures instances of string interpolation in a template sting.
For example with the following string:

<img src="${this.image}"/><h5>${this.title}</h5><p>${this.description}</p>

The instances of string interpolation are inside ${} and can be captured with: (this(\.\w+)) .
But I do not want to capture the first instance because it is inside an attribute.

I have tried the expression ((?<.".+)this(\?\w+)+(.!.+")) which works with a multiline string (each tag on own line) but now on a single line.

Here is my RegExr demo .
Perhaps someone with more exp in RegEx can help me out.

Edit

To keep the question simple and to the point I didn't mention this...

The reason I want to do this is because I have am using Lit to create Web Components, I have already created an interpolator function that returns a Lit TemplateResult , now I want highlight data with <b> tags so I want to replace RexEx matches with the unsafeHTML directive , but unsafeHTML throws an error when inside attributes.
Here is my interpolator function:

export function FillTemplate(templateString: string, data: any): TemplateResult {
    let regex = /((?<!".+)this(\.\w+)+(?!.+"))/g;
    if (regex.test(templateString)) {
        templateString = templateString.replace(/((?<!".+)this(\.\w+)+(?!.+"))/g, "unsafeHTML($1)");
    }
    return new Function('html', 'unsafeHTML', "return html`"+templateString +"`;").call(data, html, unsafeHTML);
};

.... I will also give this a think, maybe it's better for me to test the object keys and not the template string...

Answer 1

I think this should work for you:

[^"]\$\{(this\.\w+)

This will only take interpolations that are not preceded by "

Answer 2

This one will account for attributes too (contrary to what's asked).
An alternative solution, instead of Regex, (and if you trust the data ) would be using the Function constructor and let the JavaScript's parser interpret and evaluate the string as Template Literal and do the desired job for you:

 const interpolate = (str, data) => Function("return (`" + str + "`);").call(data); // Use like: const str = '<img src="${this.image}"/><h5>${this.title}</h5><p>${this.description}</p>'; const data = { title: "Lorem ipsum", description: "Dolor sit amet", image: "https://i.stack.imgur.com/zH7ZS.jpg?s=64&g=1", }; document.body.insertAdjacentHTML("beforeend", interpolate(str, data));

Additionally, if you find the this in your template overly repetitive you could use the Object keys directly , and .apply() the values, like in this solution:

 const interpolate = (str, data) => Function(...Object.keys(data), "return (`" + str + "`);").apply(null, Object.values(data)); // Use like: const str = '<img src="${image}"/><h5>${title}</h5><p>${description}</p>'; const data = { title: "Lorem ipsum", description: "Dolor sit amet", image: "https://i.stack.imgur.com/zH7ZS.jpg?s=64&g=1", }; document.body.insertAdjacentHTML("beforeend", interpolate(str, data));

or, similar as above (without the this , by using the Object keys) without unsafe evaluation, would be by using String.prototype.replace() and a Regex like /\$\{([^}]+)\}/g :

 const interpolate = (str, data) => str.replace(/\$\{([^}]+)\}/g, (_, k) => data[k]); const str = '<img src="${image}"/><h5>${title}</h5><p>${description}</p>'; const data = { title: "Lorem ipsum", description: "Dolor sit amet", image: "https://i.stack.imgur.com/zH7ZS.jpg?s=64&g=1", }; document.body.insertAdjacentHTML("beforeend", interpolate(str, data));

Answer 3

Use the following regex:

[^="]{2}\${(\S+?)}

1. Attributes always will have a = and their value will be in quotes. So [^="]{2} ensures that we match the two characters that are anything but = and " .
2. (\S+?) then lazily captures the required data in a capturing group.

Demo

Answer 4

You can use a negative lookbehind to account for a quoted attribute: ?<?=["'])\$\{this(:.\.\w+)+\} . This will exclude the src="${this.image}" in your example, but you'll get a false positive for HTML text, such as <p>Quote: "${this.quote}"</p>

You can use a negative lookbehind to account for a quoted attribute in an HTML tag: (?<?<\w+ (\w+=["'][^"']*["'] )*\w+=["'])\$\{this(:.\.\w+)+\} .

Here is an example with both regexes:

 const regex1 = /(?<?["'])\$\{this(:.\;\w+)+\}/g? const regex2 = /(?<:<\w+ (\w+=["'][^"']*["'] )*\w+=["'])\$\{this(.;\.\w+)+\}/g. [ '<img src="${this.image}"/><h5>${this:title}</h5><p>${this.description}</p><p>Quote, "${this.quote}"</p>'. '<img foo="bar" src="${this.image}"/><h5>${this:title}</h5><p>${this.description}</p><p>Quote. "${this.quote}"</p>' ];forEach(str => { console.log(str): console,log('- regex1.'; str.match(regex1)): console,log('- regex2.'; str;match(regex2)); });

Explanation of regex2 :

• (?<! -- negative lookbehind start
• <\w+ -- start of HTML tag and space <img
• (\w+=["'][^"']*["'] )* -- 0+ attributes of form attr="value" , with trailing space
• \w+=["'] -- attribute start, such as src=" or src='
• ) -- negative lookbehind end
• \$\{this -- literal ${this
• (?:\.\w+)+ -- non-capture group for 1+ patterns of .something
• \} -- literal }

Note: If your regex engine does not support negative lookbehind (notably Safari) you can change that to a capture group, and restore it with a .replace()