¿Cómo reemplazar texto con elementos html para negrita, subrayado, etc. al mismo tiempo?

Hago una pregunta previa aquí . La solución solo para el estilo audaz era:

var a; var b; $(document).ready(function() { $("#convertBtn").on("click", function() { $('#questionDisplay').text($("#questionEdit").val()); a = $("#questionDisplay").text(); $('#questionDisplay').html(a.split("**").join('')); b = a.split("**").join(''); $('#questionDisplay').html(b.split('*').join('')); }) }); 
    

Display:

Ahora, quiero agregar la funcionalidad para el estilo subrayado y quizás más estilos en el futuro. El problema es que el segundo código para el texto subrayado elimina lo que se hace en el primer código como esto:

 var a; var b; $(document).ready(function() { $("#convertBtn").on("click", function() { $('#questionDisplay').text($("#questionEdit").val()); a = $("#questionDisplay").text(); $('#questionDisplay').html(a.split("**").join('')); b = a.split("**").join(''); $('#questionDisplay').html(b.split('*').join('')); a = $("#questionDisplay").text(); $('#questionDisplay').html(a.split("__").join('')); b = a.split("__").join(''); $('#questionDisplay').html(b.split('_').join('')); }) }); 
    

Display:

Entonces, ¿cuál es la solución aquí?

Antes del proceso de subrayado, cuando a recibe el valor del text , no toma las tags que se ingresaron para que el texto aparezca en negrita. Así que asigna a con

  a = $("#questionDisplay").html(); 

en lugar de

 a = $("#questionDisplay").text(); 

lo que asegurará tomar los elementos también para que ambos puedan trabajar juntos.

 var a; var b; $(document).ready(function() { $("#convertBtn").on("click", function() { $('#questionDisplay').text($("#questionEdit").val()); a = $("#questionDisplay").text(); $('#questionDisplay').html(a.split("**").join('')); b = a.split("**").join(''); $('#questionDisplay').html(b.split('*').join('')); a = $("#questionDisplay").html(); $('#questionDisplay').html(a.split("__").join('')); b = a.split("__").join(''); $('#questionDisplay').html(b.split('_').join('')); }) }); 
    

Display: