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 that have no value, specify the attribute name as a string:

export default {
  attributes: {
    remove: ['data-src'],
  }
}

Input:

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

Output:

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

By name and value

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

export default {
  attributes: {
    remove: [
      {name: 'id', value: 'test'},
    ],
  }
}

Input:

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

Output:

<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:

export default {
  attributes: {
    remove: [
      {name: 'data-id', value: /\d/},
    ],
  }
}

Input:

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

Output:

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

API

import { removeAttributes } from '@maizzle/framework'

const options = [
  'id',
  {name: 'role', value: 'article'},
]

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