Removing html attribute from String?

Question

I have a html string which looks like this:

<div id="demo_..." class="menu">

The html code is available as a string. Now I would like to remove all id attributes which start with demo_. The result should be this:

<div class="menu">

I know that it should work with regular expressions. But I am a little bit struggling with the special characters. How should the regular expression look like so that all strings with this format can be replaced by an empty string?

Post what you've tried so far. SO policy that you should at least show signs of effort. htmlstr.replace(/(<[^>]+)\bid\s*=\s*"demo_[^"]+"([^>]+>)/g,'$1 $2') — user120242
– user120242, Commented Jun 17, 2020 at 6:30
I started with html.replace('id="[^demo"]*"'); Can you explain this approach? What is $1 and $2? — JavaForAndroid
– JavaForAndroid, Commented Jun 17, 2020 at 6:37
$1 is the first parens capture group, $2 is the second parens capture group. So when replaced the id is excluded but the two capture groups are put back in. it is also possible to use lookahead and lookbehind (lookbehind doesn't work in Safari) — user120242
– user120242, Commented Jun 17, 2020 at 6:48
Is there a way to format the submatch $1 directly? I would like to remove the last space of $1. — JavaForAndroid
– JavaForAndroid, Commented Jun 17, 2020 at 6:57
Good answer by @user120242. If you want to avoid extra spaces in the resulting string, and avoid the second capture you can use this: htmlstr.replace(/(<[^>]+)\s+id\s*=\s*"demo_[^"]+"/g, '$1'). This also works if you have attributes before the id, such as input <div data-foo="bar" id="demo_blah" class="menu"> — Peter Thoeny
– Peter Thoeny, Commented Jun 17, 2020 at 6:58

ponnex · Accepted Answer · 2020-06-17 06:52:49Z

You can use substring attribute selector

[att^=val] Represents an element with the att attribute whose value begins with the prefix "val". If "val" is the empty string then the selector does not represent anything.

[att$=val] Represents an element with the att attribute whose value ends with the suffix "val". If "val" is the empty string then the selector does not represent anything.

[att*=val] Represents an element with the att attribute whose value contains at least one instance of the substring "val". If "val" is the empty string then the selector does not represent anything.

For your case you could use

document.querySelectorAll('[id^="demo_"]')

or

document.querySelectorAll('[id*="demo_"]')

The result would be an array of HTMLElement with id attribute whose value begins with the prefix demo_ or contains demo_ if using * instead of ^. From there you could remove each HTMLElement id att using removeAttribute() Method. More reading from here.

document.querySelectorAll('[id^="demo_"]')
 .forEach(element => element.removeAttribute('id'));

Collectives™ on Stack Overflow

Removing html attribute from String?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related