Remove attributes

Maizzle can automatically remove attributes from your HTML.

By default, it removes empty style and class attributes that are sometimes left over after the CSS inlining process.

Usage

You may configure which attributes to remove through the removeAttributes array.

Empty values

To remove attributes with no values, specify the attribute name as a string:

config.js

module.exports = {
  removeAttributes: ['data-src']
}

Input:

src/templates/example.html

<img src="example.jpg" data-src alt="">

Output:

src/templates/example.html

<img src="example.jpg" alt="">

Maizzle automatically removes empty style and class attributes, no need to add them yourself.

By name and value

If you know the exact name and value of the attribute, you may pass them as an object:

config.js

module.exports = {
  removeAttributes: [
    {name: 'id', value: 'test'}
  ]
}

Input:

src/templates/example.html

<div style="color: #000" id="test">Test</div>

Output:

src/templates/example.html

<div style="color: #000">Test</div>

With a RegExp

You may also use a regular expression for the value.

All attributes with a value matching the regex will be removed:

config.js

module.exports = {
  removeAttributes: [
    {name: 'data-id', value: /\d/}
  ]
}

Input:

src/templates/example.html

<div data-id="test"></div>
<div data-id="99"></div>

Output:

src/templates/example.html

<div data-id="test"></div>
<div></div>

API

app.js

const {removeAttributes} = require('@maizzle/framework')
const options = [
  'id',
  {name: 'role', value: 'article'}
]

const html = await removeAttributes(`<div id="" style="" role="article"></div>`, options)