Как заменить текст html-элементом на жирный, подчеркнутый и т. Д.?

Question

Я хочу реализовать некоторые простые операции по уценке, как показано ниже на моем веб-сайте.Я попытался заменить * на <b> и ** на </b>, затем понял, что это не сработает легко в Jquery.

Я также понял, когда писал этот фрагмент, что это только первыйзвезда заменяется <b> тегом , в то время как на моем сайте ничего не заменяется этим кодом .

$(document).ready(function () {
    $("#convertBtn").on("click", function () {

        $('#questionDisplay').text($("#questionEdit").val());
        $('#questionDisplay').html($('#questionDisplay').text().replace('**', '</b>'));
        $('#questionDisplay').html($('#questionDisplay').text().replace('*', '<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>

Я смотрел на подобные вопросы с решениями regEx или любыми другими методами, но я не понимал работу.Итак, дела обстоят так:

1. Каково лучшее решение для замены текстовых тегов html в Jquery?
2. Не один раз, а для всех случаев.
3. И этобыло бы лучше, если бы это было возможно только с одной звездочкой, например *boldText*, а не с двумя звездами в конце.Я пытался сделать это с помощью приведенного ниже кода, но не удалось:

$('#questionDisplay').html($('#questionDisplay').html().replace(/_(.*)__/gi, "<b>$1</b>"));

Любая помощь будет оценена!

Answer 1

Используйте split и join на ** и <b> </b> соответственно.replace() заменит первое вхождение, только не все вхождения.

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>

Для одиночной звезды это немного усложняется, мы должны использовать замену как разбиение, а объединение не понимает приоритет.Таким образом, с помощью замены мы заменяем звезды одну за другой в цикле while, который работает по длине строки.Другой механизм назначения строки переменной остается тем же.

  var a;
    var b;
    var i=0;
    $(document).ready(function () {
        $("#convertBtn").on("click", function () {
    $('#questionDisplay').text($("#questionEdit").val());
    a=$("#questionDisplay").text();
    i=a.length;
    while(i--)
    {
          $('#questionDisplay').html(a.replace("*",'<b>'));
    b=a.replace("*",'<b>');
         $('#questionDisplay').html(b.replace("*",'</b>'));
         a=b.replace("*",'</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>