Question

我问上一个问题here。只是粗体样式的解决方案是：

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>

现在，我想为带下划线的样式添加功能，将来可能还会增加更多样式。问题在于带下划线的文本的第二个代码删除了第一个代码中的内容，如下所示：

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>

那么，这里的解决方案是什么？

Answer 1

在下划线处理中，当给a赋予text的值时，它不使用为使文本加粗而输入的tags。因此，将a分配为

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

代替

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

，这将确保采取<b>的元素太这样既可以一起工作。

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>

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

1 个答案: