How can I remove/replace an attribute?

[ivanjeremic]

Is there any API for removing/replacing an attribute? If not how would I do it with domutils?

[fb55]

You likely want to use Cheerio for this — the relevant functions are removeAttr and attr.

[michaelfaith]

@fb55 since Cheerio's release isn't out yet, are there any options available for this today?

[ivanjeremic]

@fb55 since Cheerio's release isn't out yet, are there any options available for this today?

Just use jsdom

[michaelfaith]

@ivanjeremic I've had issues with jsdom that I don't experience with htmlparser2. Namely the ability to add/update Angular attributes like [customAttr] or (myOutputProp). It also doesn't seem to be possible to retain camel casing on attributes, which htmlParser2 preserves.

[ivanjeremic]

Maybe jsdom/jsdom#2477 (comment)

[fb55]

This functionality is available in Cheerio. The unavailability of new loading methods shouldn't make Cheerio less useful.

[michaelfaith]

Maybe jsdom/jsdom#2477 (comment)

Their general stance is that if it's not supported in the browser, they're not going to implement it. That's why that issue was closed without comment.

This functionality is available in Cheerio. The unavailability of new loading methods shouldn't make Cheerio less useful.

@fb55 Yes, and it works great, but ESM support is critical for us. And according to these two issues, that hasn't been released: cheeriojs/cheerio#3098, cheeriojs/cheerio#2774 Any chance the 1.0 release will make it out soon? I'd love to be able to use it.

[itmayziii]

I'm not 100% sure this doesn't come with any caveats, but I have been removing/replacing attributes like this.

import { cloneNode } from 'domhandler'
import * as domutils from 'domutils'

const html = '<form></form>'
const dom = parseDocument(html).children

domutils.findAll(el => el.name === 'form', dom)
  .map(el => {
    const cloned = cloneNode(el, true)
    cloned.attribs.action = '/submit-form'
    cloned.attribs.method = 'post'
    domutils.replaceElement(el, cloned)
  })

EDIT:
Seems you can just edit attributes directly as well, no need to clone and replace.
This is actually what cheerio is doing with their setAttr method.