title: Writing a regular expression for my specific code
body: <p>I've been trying to get help with this for a few days now, I've asked a dozen questions, all of which get marked duplicate (Which after thorough investigation of the linked questions, I find out it's a different issue) and a few unhelpful comments. This time, I'm coming at it from a different angle.
  So far, I've got this working:</p>
  
  <pre><code>var themes = [
    'red',
    'pink',
    'purple',
    'deep-purple',
    'indigo',
    'blue',
    'light-blue',
    'cyan',
    'teal',
    'green',
    'lime',
    'khaki',
    'yellow',
    'amber',
    'orange',
    'deep-orange',
    'blue-grey',
    'brown',
    'grey',
    'dark-grey',
    'black'
  ]
  
  themes.forEach((theme)=&gt;{
    HTTP.get('https://www.w3schools.com/lib/w3-theme-${theme}.css', (err, res)=&gt;{
      console.log(`/*${theme}*/\n${res.content
        .replace(/w3-theme/g, theme)
        .replace(/w3-text-theme/g, `${theme}-text`)
        .replace(/w3-border-theme/g, `${theme}-border`)
        .replace(/w3-hover-theme/g, `${theme}-hover`)
        .replace(/w3-hover-text-theme/g, `${theme}-hover-text`)
        .replace(/w3-hover-border-theme/g, `${theme}-hover-border`)
        .replace(`${theme}-action`, `btn-${theme}`)
      }\n`)
    })
  }
  </code></pre>
  
  <p>It's output is one of these for each color:</p>
  
  <pre><code>/*lime*/
  .lime-l5 {color:#000 !important; background-color:#fcfdf3 !important}
  .lime-l4 {color:#000 !important; background-color:#f5f8d7 !important}
  .lime-l3 {color:#000 !important; background-color:#eaf1af !important}
  .lime-l2 {color:#000 !important; background-color:#e0ea87 !important}
  .lime-l1 {color:#000 !important; background-color:#d6e35f !important}
  .lime-d1 {color:#000 !important; background-color:#c1d325 !important}
  .lime-d2 {color:#fff !important; background-color:#acbb21 !important}
  .lime-d3 {color:#fff !important; background-color:#96a41d !important}
  .lime-d4 {color:#fff !important; background-color:#818c19 !important}
  .lime-d5 {color:#fff !important; background-color:#6b7515 !important}
  
  .lime-light {color:#000 !important; background-color:#fcfdf3 !important}
  
  /*These lines need to be added via a replace statement*/
  .btn-lime-light {color:#000 !important; background-color: #fcfdf3 !important}
  .btn-lime-light:hover {color:#000 !important; background-color:#f5f8d7 !important; border-color:#f5f8d7 !important}
  /*They aren't currently here*/
  
  .lime-dark {color:#fff !important; background-color:#6b7515 !important}
  .btn-lime {color:#fff !important; background-color:#6b7515 !important}
  
  .lime {color:#000 !important; background-color:#cddc39 !important}
  .lime-text {color:#cddc39 !important}
  .lime-border {border-color:#cddc39 !important}
  
  .lime-hover:hover {color:#000 !important; background-color:#cddc39 !important}
  .lime-hover-text:hover {color:#cddc39 !important}
  .lime-hover-border:hover {border-color:#cddc39 !important}
  </code></pre>
  
  <p>I have tried adding the following, in almost every variation I can fathom (I.E. Adding flags, changing notation, breaking it up, etc.): </p>
  
  <pre><code>.replace(/(\.(.*)-l4 .*#(.*?) .*#(.*) .*}(\n.*?)*-light.*?#(.*?) .*#(.*) .*})/, `$1\n.btn-$2-light {color:#$6 !important; background-color: #$7 !important}\n.btn-$2-light:hover {color:#$3 !important; background-color:#$4 !important; border-color:#$4 !important}`)
  </code></pre>
  
  <p>To no avail, it find 0 matches contrary to <a href="https://regex101.com/r/lC0eFT/4/" rel="nofollow noreferrer">My online tests</a>. </p>
  
  <p>My question is: How should I go about adding those 2 lines?</p>