如何用html元素替换粗体，带下划线等文字? [英] How to replace text with html element for bold, underlined, etc?

问题描述

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

I want to implement some simple markdown operations like below snippet in my website. I tried to replace * with <b> and ** with </b>, then realized that this doesn't work easily in Jquery.

在编写此代码段时，我还意识到，只有第一颗星星被替换为<b>标签，而我的网站中没有任何代码被替换为.

I also realized when writing this snippet, that just the first star is being replaced with <b> tag while nothing replaced in my website with this code.

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

I looked at the similar questions with regEx solutions or any other methods but I didn't understand the work. So, things are:

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

1. What is the best solution for text to html tag replacement in Jquery?
2. Not for once but for all occurances.
3. And it'd be better if it is possible with only one star wrap like *boldText* not two stars at the end. I tried to do this with below code but failed:

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

任何帮助将不胜感激！

推荐答案

分别在**和<b> </b>上使用split和join. replace()只会替换第一个匹配项，而不是所有匹配项.

Use split and join on ** and <b> </b> respectively. replace() will replace the first occurrence only not all the occurrences.

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循环内逐个替换星号，该循环在字符串的长度范围内运行.将字符串分配给变量的其他机制保持不变.

For single star it gets a bit complicated, we have to use replace as split and join do not understand precedence. So with replace we replace the stars one by one, inside a while loop which runs for the length of the string. The other mechanism of assigning the string to variable remains same.

  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元素替换粗体，带下划线等文字?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！