JSFiddle - React, Tailwind, and code Playground

HTML

<p id="sample1">
     <b><i>O</i>RIGINAL <big><i>with italics</i> and </big> withOUT</b>
</p>
<p id="inverted">... inverted will be here ...</p>

<p>ppkrauss</p>

JavaScript

// DOM correction as an alternative to a "XML interleaving algorithm"

var s = $('#sample1').html(); // get original html text fragment

// INVERSION ALGORITHM: add and remove italics.
s = "<i>"+
    s.replace(/<(\/?)i>/mg, 
              function (m,p1){
                  return p1? '<i>': '</i>';
              }
    ) +
    "</i>";  // a not-well-formed-XHTML, but it is ok...
$('#inverted').html(s); // ...the DOM do all rigth!
// minor corrections, for clean empties:
s = $('#inverted').html();
s = s.replace(/<([a-z]+)>(\s*)<\/\1>/mg,'$2'); // clean
s = s.replace(/<([a-z]+)>(\s*)<\/\1>/mg,'$2'); // clean remain
$('#inverted').html(s);  
// END ALGORITHM

alert(s);