替换 [b][/b] 以在 DIV 上应用粗体文本

Question

On my Ionic App I have a Textarea where the user can select a text and with button [BOLD] add [b] [/b] around the selection.

How can I apply BOLD formating, replacing the [b] [/b] on the output text?

Thats my code. And here's the JsFiddle

<textarea id="TheTextInput" rows="5"></textarea>
<input type="button" id="TheButton" value="click" />
<input type="button" id="bold" value="BOLD" />
<pre id="TheOutput"></pre>

$(document).ready(function () {
    $('#TheButton').click(PutTextIntoDiv);
});

function PutTextIntoDiv() {
    var TheText = encodeURIComponent($('#TheTextInput').val());
    $('#TheOutput').text(decodeURIComponent(TheText));
}

$( "#bold" ).click(function() {
    var textArea = document.getElementById("TheTextInput");
    if (typeof(textArea.selectionStart) != "undefined") {
        var begin = textArea.value.substr(0, textArea.selectionStart);
        var selection = textArea.value.substr(textArea.selectionStart, textArea.selectionEnd - textArea.selectionStart);
        var end = textArea.value.substr(textArea.selectionEnd);
        textArea.value = begin + '[b]' + selection + '[/b]' + end;
    }
});

Thanks for your help!!

*Its not duplicate from Is it possible to display bold and non-bold text in a textarea?

Cause I don't want format the text inside the textarea, but the OUTPUT text.

Answer 1

Consider PutTextIntoDiv() replacing with:

function PutTextIntoDiv() {
    $('#TheOutput').html($('#TheTextInput').val().replace(/\[b\]/g, '<b>').replace(/\[\/b\]/g, '</b>'));
}

The <pre> in your JSFiddle should render <b> fine.

Answer 2

You can do a RegEx replace to convert the "BBCode" tags into html tags using .replace(/\\[b\\](.*)\\[\\/b\\]/g, '<b>$1</b>') . Additionally, jQuery's .text() automatically encodes HTML entities, so you will not be able to add stylized text, so you should be using .html() instead. Overall, your code should be:

function PutTextIntoDiv() {
    var TheText = encodeURIComponent($('#TheTextInput').val());
    $('#TheOutput').html(decodeURIComponent(TheText).replace(/\[b\](.*?)\[\/b\]/g, '<b>$1</b>'));
}

I'm not sure what the purpose of encoding and immediately decoding uri components is, but I tried to keep as much as I can untouched. Here's an updated fiddle: http://jsfiddle.net/TheQueue841/62karfm1/