如何在特定标签中使用正则表达式替换 html 属性

Question

I need to replace the value of "p-type" to "p-kind" only in the "button" tags using regex, for example:

input:

<button p-type="foo">
    anything
</button>

output:

<button p-kind="foo">
    anything
</button>

the "p-type" property may not be the first one, but even then it should be changed to "p-kind", for example:

input:

<button anythingProperty p-type="foo">
    anything
</button>

output:

<button anythingProperty p-kind="foo">
    anything
</button>

If the tag is not a button the "p-type" remains, for example a div with this property will not be changed.

I can change using the following expression: (p-type)([a-zA-Z0-9:]*) . But that changes for all and I would like to group only the ones that are <button></button>

Answer 1

• Don't use invalid HTML5 attributes. Use data-* attributes instead
• Don't use RegExp. Use a DOMParser instead

 const input = `<button style="color:red;" data-type="foo">anything</button>`; const doc = new DOMParser().parseFromString(input, "text/html"); const btn = doc.querySelector("button"); btn.dataset.type = "bar"; console.log(btn.outerHTML)

Or, on order to modify the data attribute name completely, ie: change data-type="foo" into data-kind="foo" :

 const input = `<button style="color:red;" data-type="foo">anything</button>`; const doc = new DOMParser().parseFromString(input, "text/html"); const btn = doc.querySelector("button"); const dataValue = btn.dataset.type; // store the old value delete btn.dataset.type; // delete old data attribute btn.dataset.kind = dataValue; // add new data attribute console.log(btn.outerHTML)