Node JS: given a html string, how can I get the content inside of all <script> tags, manipulate and replace it?

Question

Overview :

I am working on a project that has dozens of .Liquid (Shopify) snippets with <script> tags inside of them containing JS code.

They're similar to HTML , they look something like this:

{% assign variable = 'test' %}

<p>hey {{variable}}</p>
<script>console.log("hey")</script>
{% schema %}
{
...json stuff
}
{% endschema %}

Issue :

Basically what I wanna do is get the content inside <script> , manipulate it and replace with the new manipulated one.

I managed to do this using cheerio , but it ends up messing up the Liquid variables since it doesn't recognize them.

My previous code was looking something like this:

let html = cheerio.load(code, { _useHtmlParser2: true });

const { data: js } = html("script").get()[0].children[0];
html("script").get()[0].children[0].data = await minifyJS(js);

const result = html.html();

Expected Behavior :

I need to:

1. Find all script tags in a HTML string;
2. Get the code inside of the <script> tag;
3. Manipulate this code (minify, essentially);
4. Replace it with the now minified code.

I am trying to avoid using regex , but I can't foresee any other solutions.

Any suggestion is greatly appreciated.

Thank you!

Answer 1

To get the content inside tags you can use Regular Expressions

<script(.|\n)*?<\/script>

This is just the regex

let str = <Whatever string or data you want to extract script tags>;
let result = let result = str.match(/<script(.|\n)*?<\/script>
/g);

console.log(result);

in result you will get the content inside the script tag