javascript - 如何用 html 元素替换粗体、下划线等文本？

Question

我想在我的网站上实现一些简单的 Markdown 操作，例如下面的代码片段。我试图替换 *与 <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. 在 Jquery 中将文本替换为 html 标签的最佳解决方案是什么？
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>

对于单星它有点复杂，我们必须使用 replace 因为 split 和 join 不理解优先级。因此，通过替换，我们在一个 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>