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

问题描述

我在此处.只是大胆的样式的解决方案是:

I ask a previous question here. The solution for just bold style was:

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>

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

Now, I want to add the functionality for underlined style and maybe more styles in the future. The problem is that the second code for the underlined text removes what is done in the first code as this:

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>

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

So, what is the solution here?

推荐答案

在下划线处理之前，给a赋予text的值时，它不使用为制作文本而输入的tags胆大.因此，将a分配为

Before underline process when a is given the value of the text, it doesn't takes the tags which were entered for making the text bold. So assign a with

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

代替

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

这将确保也采用<b>元素，以便两者可以一起工作.

which will ensure to take the <b> elements too so that both can work together.

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