MacOs sed replace does not work for html file

Question

I am trying to prepend a <h4> tag in my document with <button class="collapse"> and also append the closing tag </button> after a </h4> tag.

My example document looks like this:

<h4 id="id1">Some text.<br />
</h4>
<div class="content">
<p>Content.</p>
</div>

<h4 id="id2">Some text 2.<br />
</h4>
<div class="content">
<p>Content.</p>
</div>

<h4 id="id3">Some text 3.<br />
</h4>
<div class="content">
<p>Content.</p>
</div>

<h4 id="id4">Some text 4.<br />
</h4>
<div class="content">
<p>Content.</p>
</div>

What I would like to achieve is this:

<button class="collapse"><h4 id="id1">Some text.<br />
</h4></button>
<div class="content">
<p>Content.</p>
</div>

<button class="collapse"><h4 id="id2">Some text 2.<br />
</h4></button>
<div class="content">
<p>Content.</p>
</div>

<button class="collapse"><h4 id="id3">Some text 3.<br />
</h4></button>
<div class="content">
<p>Content.</p>
</div>

<button class="collapse"><h4 id="id4">Some text 4.<br />
</h4></button>
<div class="content">
<p>Content.</p>
</div>

What I tried is this: sed -E -i -e 's/(\<h4\w*.*)(\n)(\<\/h4\>)/\<button\ class\=\"collapse\"\>\1\2\n\3\<\/button\>/' index.html

It does not work though, it does not change anything, similar sed with similar regex works for a markdown file, but I can not get it to work with a html file.

I also tried find and replace in Atom editor using: (<h4\w*.*)(\n)(</h4>) as regex and <button class="collapse">$1$2$3</button> as replace and that works absolutely perfectly.

What is my mistake? Is it maybe the newline? How would I achieve what I need using sed on MacOs, I am using bash.

Thank you very much, would appreciate any help

Answer 1

sed -e 's/^<h4/<button class="collapse">&/' -e 's:</h4>:&</button>:' infile