Replacing [b][/b] to apply BOLD text on a 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.

Possible duplicate of [How do display bold and non-bold text in textarea?](http://stackoverflow.com/questions/17456295/how-do-display-bold-and-non-bold-text-in-textarea) — Mike Cluck, Oct 24 '16 at 13:27
I would just append .replace('[b]', '').replace('[/b]', '') after decodeURIComponent(TheText) and use a div instead of pre, since pre is not showing the formatted text but the html code. — alexandre, Oct 24 '16 at 13:34
I think that should be `.replace(/\[b\]/gi, '')` otherwise JavaScript will only replace the first instance of [b] and not all of them. Using `/` instead of `'` makes it a regular expression, the `g` makes it greedy and the `i` makes it case-insensitive (obviously the same would aply to [/b] too) — Vitani, Oct 24 '16 at 13:45

score 2 · Accepted Answer · answered Oct 24 '16 at 13:48

2

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.

answered Oct 24 '16 at 13:48

asker

46
4

score 0 · Answer 2 · answered Oct 24 '16 at 13:48

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/

Actually, this method doesn't do well with nesting. asker's solution works as expected. — Quangdao Nguyen, Oct 24 '16 at 13:57

Replacing [b][/b] to apply BOLD text on a DIV

2 Answers2