replace all instances of span class red with strike tag

Question

I am trying to change all the span tags of class red and its content with strike tag. But the problem is that it doesn't replace the span tags with class red.

Here is my code:

let str = `<span class="black">time on hire shall not commence before the first layday (local time) and should the Vessel not have been delivered on or before the canceling date (local time) at the port or place stated in </span><span class="green"><span class="red"> Sub-clause 2(a) the Charterers shall  </span></span><span class="black">have the option of cancelling this Charter Party at any time but not later than the day of the </span><span class="red">Vessel</span><span class="black">/</span><span class="red">ad;s</span><span class="green">n</span><span class="black">
            </span><span class="red">notice of delivery. 
            </span>`;
str = str.replace(/<span[^>]+?class="red".*?>([^<]+)<\/span>/g,`<strike>$1</strike>`);
console.log(str);

But the problem is the code replaces only instance of span class red. I need to replace all instances of span with class red with strike tag.

The result I am getting now is:

"<span class="black">time on hire shall not commence before the first layday (local time) and should the Vessel not have been delivered on or before the canceling date (local time) at the port or place stated in </span><span class="green"><span class='red'> Sub-clause 2(a) the Charterers shall  </span></span><span class="black">have the option of cancelling this Charter Party at any time but not later than the day of the </span><strike>Vessel</strike><span class="black">/</span><strike>ad;s</strike><span class="green">n</span><span class="black">
</span><strike>notice of delivery. 
</strike>"

Note: I will strip all the tags later to convert it to string with only a strike tag to keep track of the red span text. So I can't use CSS here.

your code is ok, you just missed the str = str.replace() assignation — malarres, Mar 06 '20 at 07:08
'But the problem is the code replaces only instnace of span class red'... It's not, its replacing them all, run the code snippet — jeprubio, Mar 06 '20 at 07:46

Daan · Answer 1 · 2020-03-06T08:00:34.407

First, create a container element with createElement() and paste your HTML string into it.

Now you can manipulate it like any DOM element.

const str = document.createElement("div");
str.innerHTML =`<span class="black">time on hire shall not commence before the first layday (local time) and should the Vessel not have been delivered on or before the canceling date (local time) at the port or place stated in </span><span class="green"><span class="red">Sub-clause 2(a) the Charterers shall  </span></span><span class="black">have the option of cancelling this Charter Party at any time but not later than the day of the </span><span class="red">Vessel</span><span class="black">/</span><span class="red">ad;s</span><span class="green">n</span><span class="black"></span><span class="red">notice of delivery.</span>`;

Array.from(str.querySelectorAll("span.red")).forEach((el) => {
  const strike = document.createElement("strike");
  strike.classList.add(el.classList);
  strike.innerHTML = el.innerHTML;
  el.parentNode.replaceChild(strike, el);
});

console.log(str);
console.log(str.innerHTML);
document.body.innerHTML = str.innerHTML;

replace all instances of span class red with strike tag

1 Answers1