Question

我想在我的网站中实现一些简单的降价操作，例如下面的代码段。我尝试将*替换为，并将**替换为，然后意识到在Jquery中这并不容易。

在编写此代码段时，我还意识到，只是用标签替换了第一颗星星，而在我的网站上没有用该代码替换。

$(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解决方案或任何其他方法查看了类似的问题，但我不理解其工作。所以，事情是：

在Jquery中用文本替换html标签的最佳解决方案是什么？
不是一次，而是所有发生。
如果只用*boldText*这样的一圈星星而不是最后两颗星星，那将是更好的选择。我尝试使用以下代码执行此操作，但失败了：

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

任何帮助将不胜感激！

Answer 1

分别在split和join上使用**和 。 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来理解优先级。因此，通过replace，我们在一个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>

如何用html元素替换粗体，带下划线等文字？

1 个答案: