This code defines a function that extracts <style> and <script> tags from HTML content, processing links and scripts to include their content dynamically. It then combines the extracted styles and scripts into a single string and returns the result.

Run example

npm run import -- "Include the script in the response"

Include the script in the response

function getScriptsAndStyles(content, additional = '0.*.js') {
    var output = content.match(/<style.*?\/style>/ig) || '';
    var scripts = ``;

    var m, re = (/<link.*?>/ig);
    while (m = re.exec(content)) {
        var src;
        if ((src = (/href="(.*?)"/ig).exec(m[0])) != null && src[1].indexOf('google') == -1) {
            scripts += '<style>' + fs.readFileSync(path.join(project, 'public', src[1])) + '</style>';
        } else {
            scripts += m[0];
        }
    }

    var m, re = (/<script.*?\/script>/ig);
    while (m = re.exec(content)) {
        var src;
        if ((src = (/src="(.*?)"/ig).exec(m[0])) != null) {
            scripts += '<script defer>'
                + fs.readFileSync(path.join(project, 'public', src[1]))
                + '</script>';
        } else {
            scripts += m[0];
        }
    }

    return output + scripts;
};
module.exports = getScriptsAndStyles;
getScriptsAndStyles;

/**
 * Extracts scripts and styles from the given HTML content.
 *
 * @param {string} content - The HTML content to process.
 * @param {string} [additional='.js'] - A regex pattern to match additional script files.
 * @returns {string} The processed HTML content with extracted scripts and styles.
 */
function getScriptsAndStyles(content, additional = '.js') {
    // Extract all inline styles
    const inlineStyles = content.match(/<style.*?\/style>/ig) || '';

    // Initialize an empty string to store the extracted scripts
    let scripts = '';

    // Regular expression to match link tags
    const linkRegex = /<link.*?>/ig;
    let match;
    while ((match = linkRegex.exec(content))!== null) {
        // Regular expression to match href attribute
        const hrefRegex = /href="(.*?)"/ig;
        const hrefMatch = hrefRegex.exec(match[0]);

        // If href attribute is found and does not match Google, extract the script
        if (hrefMatch!== null &&!hrefMatch[1].includes('google')) {
            // TODO: Consider using a more robust way to read the script file
            // For example, using a library like fs-extra or a bundler like Webpack
            scripts += `<style>${fs.readFileSync(path.join('public', hrefMatch[1]))}</style>`;
        } else {
            scripts += match[0];
        }
    }

    // Regular expression to match script tags
    const scriptRegex = /<script.*?\/script>/ig;
    while ((match = scriptRegex.exec(content))!== null) {
        // Regular expression to match src attribute
        const srcRegex = /src="(.*?)"/ig;
        const srcMatch = srcRegex.exec(match[0]);

        // If src attribute is found, extract the script
        if (srcMatch!== null) {
            // TODO: Consider using a more robust way to read the script file
            // For example, using a library like fs-extra or a bundler like Webpack
            scripts += `<script defer>${fs.readFileSync(path.join('public', srcMatch[1]))}</script>`;
        } else {
            scripts += match[0];
        }
    }

    // Return the processed HTML content with extracted scripts and styles
    return inlineStyles + scripts;
}

module.exports = getScriptsAndStyles;

This code defines a function getScriptsAndStyles that extracts and processes <style> and <script> tags from HTML content.

Here's a breakdown:

1. Initialization:

   • It initializes an empty string output to store the extracted styles.
   • It initializes an empty string scripts to store the extracted scripts.

2. Extracting Styles:

   • It uses a regular expression to find all <style> tags within the input content and stores them in the output variable.

3. Processing Links:

   • It iterates through all <link> tags using a regular expression.
   • For each <link> tag, it checks if it has a href attribute and if the URL doesn't contain "google".
   • If the conditions are met, it reads the content of the linked file using fs.readFileSync and adds it as a <style> tag to the scripts variable.
   • Otherwise, it simply adds the original <link> tag to scripts.

4. Processing Scripts:

   • It iterates through all <script> tags using a regular expression.
   • For each <script> tag, it checks if it has a src attribute.
   • If the condition is met, it reads the content of the linked script file using fs.readFileSync and adds it as a <script> tag with defer attribute to the scripts variable.
   • Otherwise, it simply adds the original <script> tag to scripts.

5. Returning Combined Content:

   • Finally, it combines the extracted styles (output) and processed scripts (scripts) and returns the result.

Let me know if you have any more questions.