How to replace html property using regex in a specific tag

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>

You do realize that p-type is an invalid HTML5 attribute, right? Use data-* attributes instead. Also, use a proper DOMParser, not RegExp. — Roko C. Buljan
– Roko C. Buljan, Commented Dec 8, 2022 at 18:33
You can use 2 capture groups (<button\b[^<>]* p-)type(="[^"]*"[^<>]*>) regex101.com/r/r8lmwD/1 and replace with $1kind$2 but consider using a dom parser. — The fourth bird
– The fourth bird, Commented Dec 8, 2022 at 18:37
@RokoC.Buljan thanks for the answer. This component I'm using is customized and it has this property — ramos jc
– ramos jc, Commented Dec 8, 2022 at 18:38
@ramosjc You are welcome, but consider using the answer of Roko C. Buljan instead. — The fourth bird
– The fourth bird, Commented Dec 8, 2022 at 18:49
Like 80% of Regex tagged questions, this is a possible XY problem. — zer00ne
– zer00ne, Commented Dec 8, 2022 at 18:51

Roko C. Buljan · Accepted Answer · 2022-12-08 18:45:11Z

5

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, i.e: 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)

edited Dec 8, 2022 at 18:45

answered Dec 8, 2022 at 18:38

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ramos jc Over a year ago

Thanks for the answer, but in this example you are changing the value of "data-type", but how would I change the name of the property instead of the value

Roko C. Buljan Over a year ago

@ramosjc refresh the page. I edited the answer meanwhile

Collectives™ on Stack Overflow

How to replace html property using regex in a specific tag

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related