Getting all inline styles from an HTML string using JavaScript

Question

Getting all inline styles from an HTML string using JavaScript

(JavaScript) I am working with an html email template stored as a string. Is there a way to extract all the inline styles used in the template? For instance, if I have this input:

<div style="min-width:300px;max-width:600px;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;margin:0 auto;" align="center">
  <div style="margin: 0 auto;padding: 20px;">
    <a href="/" style="text-decoration: none;">
       <img src="https://i.ibb.co/KXYtCNT/Logo-wellness-w.png" alt="" width="84px" />
    </a>
  </div>
</div>

I would like the output to be ['min-width','max-width','overflow-wrap','word-wrap','word-break','margin','padding','text-decoration']

I believe using Regex would be the most efficient way, but I am unsure of the exact syntax. I attempted this for tags:

const tagRegex = /<\/?[\w\d]+>/gi;

and this for styles but couldn't get it to work:

const styleRegex = /(.*?)+:[\w\d]+;/;

javascript html css regex

Answer 1

Answer №1

For a secure approach, utilize the DOMParser:parseFromString() method, as previously suggested by Quentin.

const HTML = `<div style="min-width:300px;max-width:600px;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;margin:0 auto;" align="center">
  <div style="margin: 0 auto;padding: 20px;">
    <a href="/" style="text-decoration: none;">
       <img src="https://i.ibb.co/KXYtCNT/Logo-wellness-w.png" alt="" width="84px" />
    </a>
  </div>
</div>`;

// Regular Expression explained at: https://regex101.com/r/K4z8M4/1
const CSS_PATTERN = /([\w-]*)\s*:\s*(.*?)(?=\s*(?:;|$))/g;

const parser = new DOMParser();
const doc = parser.parseFromString(HTML, 'text/html');
const domElements = doc.querySelectorAll('body *');

domElements.forEach((e) => {
  if (e.style.cssText != '') {
    console.log('Identified style attribute on <' + e.tagName + '>');
    console.log('Inline CSS = "' + e.style.cssText + '"');
    console.log('Retrieve CSS rules with regular expression:');
    
    const matches = e.style.cssText.matchAll(CSS_PATTERN);
    for (const match of matches) {
      console.log('  ' + match[1] + ': ' + match[2]);
    }
    
    console.log('Affected style rules:');
    for (const [key, value] of Object.entries(e.style)) {
      if ((key + "").match(/^\d+$/)) {
        console.log('  ' + value);
      }
    }
  }
});

As illustrated, a regex was employed to identify the CSS rules. This is because discrepancies were observed between the style attribute of the DOM element and the CSS declarations. For instance, specifying margin: 1em impacts margin-top, margin-right, margin-bottom, and margin-left. However, typically only the margin rule is desired in the list.

If further clarification on the regular expression utilized to split the CSS rules is required, refer to the pattern description here: https://regex101.com/r/K4z8M4/1

Answer 2

For a secure approach, utilize the DOMParser:parseFromString() method, as previously suggested by Quentin.

const HTML = `<div style="min-width:300px;max-width:600px;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;margin:0 auto;" align="center">
  <div style="margin: 0 auto;padding: 20px;">
    <a href="/" style="text-decoration: none;">
       <img src="https://i.ibb.co/KXYtCNT/Logo-wellness-w.png" alt="" width="84px" />
    </a>
  </div>
</div>`;

// Regular Expression explained at: https://regex101.com/r/K4z8M4/1
const CSS_PATTERN = /([\w-]*)\s*:\s*(.*?)(?=\s*(?:;|$))/g;

const parser = new DOMParser();
const doc = parser.parseFromString(HTML, 'text/html');
const domElements = doc.querySelectorAll('body *');

domElements.forEach((e) => {
  if (e.style.cssText != '') {
    console.log('Identified style attribute on <' + e.tagName + '>');
    console.log('Inline CSS = "' + e.style.cssText + '"');
    console.log('Retrieve CSS rules with regular expression:');
    
    const matches = e.style.cssText.matchAll(CSS_PATTERN);
    for (const match of matches) {
      console.log('  ' + match[1] + ': ' + match[2]);
    }
    
    console.log('Affected style rules:');
    for (const [key, value] of Object.entries(e.style)) {
      if ((key + "").match(/^\d+$/)) {
        console.log('  ' + value);
      }
    }
  }
});

As illustrated, a regex was employed to identify the CSS rules. This is because discrepancies were observed between the style attribute of the DOM element and the CSS declarations. For instance, specifying margin: 1em impacts margin-top, margin-right, margin-bottom, and margin-left. However, typically only the margin rule is desired in the list.

If further clarification on the regular expression utilized to split the CSS rules is required, refer to the pattern description here: https://regex101.com/r/K4z8M4/1

Getting all inline styles from an HTML string using JavaScript

Answer №1

Similar questions

Getting information from MongoDB using Node.js and Angular

What is the process for setting default parameters using a recompose, lifecycle HOC?

What is the best way to properly format letters with accents (such as French letters)?

The functionality of PHP in relation to the jQuery post feature seems to be malfunction

Can someone guide me on incorporating bluebird promises with request-extensible?

Implementing Vue data binding with JavaScript objects

The ForEach function does not execute actions on every individual object, but rather only once

Troubles encountered while processing STL file readers

The Plupload internal version seems to be incorrect. The file is labeled as 2.3.9, however, the actual version within the file is 2.3

The input field will be in a read-only state if it contains a value from the database. However, it will be editable if the value

JavaScript - Marking selected text: What are the options?

Node.js Project Using a Specific URL and Parameter

Use yarn to install both devDependencies and dependencies simultaneously

Unexpected problem discovered with Firefox and JqueryUI - content is misaligned within the dialog box

What is the best way to create a Laravel object for use in JavaScript in a Laravel Blade?

Evolving characteristics of Bootstrap popover

The CSS grid-template-area feature is not functioning properly in web browsers

What is the best way to implement next and previous buttons in a slideshow using code?

Incorrect handling of Unix timestamps in AngularJS

creating a table displaying data in a horizontal format sourced from ajax/json transformation