const regex = /((?<pad>\A[^"]*"[^"]*?|\G[^"{}]*|\G"[^"]*")(((?<start>\{%)-(?<content>[^"]*?)-(?<end>%\}))|(?<pad2>[^"{}%]*)))/gm;
// Alternative syntax using RegExp constructor
// const regex = new RegExp('((?<pad>\\A[^"]*"[^"]*?|\\G[^"{}]*|\\G"[^"]*")(((?<start>\\{%)-(?<content>[^"]*?)-(?<end>%\\}))|(?<pad2>[^"{}%]*)))', 'gm')
const str = `<span foo="bar" class="{%- if foo == true -%} blue{%- else -%} red{%- endif -%}">item {%- DONT TOUCH THIS - IT IS NOT IN QUOTES -%} </span> "rs gs{%- Replace this, it is in quotes -%} afeafe"`;
const subst = `${pad}${pad2}${start}${content}${end}`;
// The substituted value will be contained in the result variable
const result = str.replace(regex, subst);
console.log('Substitution result: ', result);
Please keep in mind that these code samples are automatically generated and are not guaranteed to work. If you find any syntax errors, feel free to submit a bug report. For a full regex reference for JavaScript, please visit: https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Regular_Expressions