CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ninbit
ninbit

Reputation: 529

How to replace text with html element for bold, underlined, etc. at the same time?

I ask a previous question here. The solution for just bold style was:

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

  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<textarea id="questionEdit" rows="5" style="width: 500px;">The user types here many *bold** and *secondBold** texts. The convert button should change the stars to html tags.</textarea>

<button id="convertBtn">Convert</button>
<p>Display: </p>
<p id="questionDisplay"></p>

Now, I want to add the functionality for underlined style and maybe more styles in the future. The problem is that the second code for the underlined text removes what is done in the first code as this:

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

    a = $("#questionDisplay").text();
    $('#questionDisplay').html(a.split("__").join('</u>'));
    b = a.split("__").join('</u>');
    $('#questionDisplay').html(b.split('_').join('<u>'));

  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<textarea id="questionEdit" rows="5" style="width: 500px;">Now the user types here  *bold** with _underlined__ texts. But the code of underlined removes the work done by the code of bold!</textarea>

<button id="convertBtn">Convert</button>
<p>Display: </p>
<p id="questionDisplay"></p>

So, what is the solution here?

Upvotes: 0

Views: 139

Answers (1)

ellipsis
ellipsis

Reputation: 12152

Before underline process when a is given the value of the text, it doesn't takes the tags which were entered for making the text bold. So assign a with

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

instead of

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

which will ensure to take the <b> elements too so that both can work together.

var a;
var b;
$(document).ready(function() {
  $("#convertBtn").on("click", function() {
    $('#questionDisplay').text($("#questionEdit").val());
    a = $("#questionDisplay").text();
    $('#questionDisplay').html(a.split("**").join('</b>'));
    b = a.split("**").join('</b>');
    $('#questionDisplay').html(b.split('*').join('<b>'));
    a = $("#questionDisplay").html();
    $('#questionDisplay').html(a.split("__").join('</u>'));
    b = a.split("__").join('</u>');
    $('#questionDisplay').html(b.split('_').join('<u>'));
  
  })
  
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="questionEdit" rows="5" style="width: 500px;">Now the user types here  *bold** with _underlined__ texts. But the code of underlined removes the code of bold!</textarea>

<button id="convertBtn">Convert</button>
<p>Display: </p>
<p id="questionDisplay"></p>

Upvotes: 1

Related Questions