RegEx: обнаружить интерполяцию строки, но не внутри атрибута

Я думаю, что это должно сработать для вас:

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

Для этого потребуются только интерполяции, которым не предшествует "

Используйте следующее регулярное выражение:

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

1. Атрибуты всегда будут иметь = и их значение будет в кавычках. Таким образом, [^ = "]{2} гарантирует, что мы сопоставляем два символа, которые не являются = и ".
2. (\S+?) затем лениво захватывает необходимые данные в группу захвата.

Демо

Вы можете использовать отрицательный просмотр назад для учета атрибута в кавычках: ?<!=["'])\$\{this(?:\.\w+)+\}. Это исключит src = "${this.image}" в вашем примере, но вы получите ложное срабатывание для текста HTML, например <p>Quote: "${this.quote}"</p>

Вы можете использовать отрицательный просмотр назад для учета атрибута в кавычках в теге HTML: (?<!<\w+ (\w+=["'][^"']*["'] )*\w+=["'])\$\{this(?:\.\w+)+\}.

Вот пример с обоими регулярными выражениями:

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.info(str);
  console.info('- regex1:', str.match(regex1));
  console.info('- regex2:', str.match(regex2));
});

Объяснение regex2:

• (?<! -- отрицательный просмотр назад
• <\w+ -- начало тега HTML и пробел <img
• (\w+=["'][^"']*["'] )* -- 0+ атрибутов формы attr = "value" с пробелом в конце
• \w+=["'] -- начало атрибута, например src = " или src='
• ) -- отрицательный просмотр назад
• \$\{this -- буквально ${this
• (?:\.\w+)+ -- группа без захвата для 1+ паттернов .something
• \} -- буквально }

Примечание. Если ваш движок регулярных выражений не поддерживает отрицательный просмотр назад (особенно Safari), вы можете изменить его на группу захвата и восстановить ее с помощью .replace()

Этот также будет учитывать атрибуты (вопреки тому, что спрашивали).
Альтернативное решение вместо регулярного выражения (и если вы доверяете data) будет использовать конструктор функций и позволить синтаксическому анализатору JavaScript интерпретировать и оценивать строку как литерал шаблона и выполнять за вас желаемую работу:

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));

Кроме того, если вы обнаружите, что this в вашем шаблоне слишком повторяется, вы можете напрямую использовать ключи объекта и .apply() значения, как в этом решении:

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));

или, как указано выше (без this, с использованием ключей объекта) без небезопасной оценки, было бы с использованием String.prototype.replace() и регулярного выражения, такого как /\$\{([^}]+)\}/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));