Adding Tags to Highlighted Text in JS Not Working

Question

I know many people have posted this exact question, but none of them are seeming to help me out. I am very new to Javascript, and I am trying to write a function that adds tags to the highlighted text in a Textarea.

Now my problem is it will not actually put the tags around the text. Here is my code:

HTML:

<textarea id="my_textarea" name="my_textarea"></textarea>
<br />
<input type="button" value="bold" onclick="formatText ('b');" />
<input type="button" value="italic" onclick="formatText ('i');" />
<input type="button" value="underline" onclick="formatText ('u');" />

JS:

function formatText(tag) {
    var myTextArea = window.getSelection();
    var myTextAreaValue = myTextArea.toString();
    var updatedText = '<'+tag+'>' + myTextAreaValue + '</'+tag+'>';
    myTextArea.value = updatedText;
}

Or simply the Fiddle. Now why it will not put the tags around the text I do not know. Please help me out! :) A new Javascript(er) here, it is not very similar to PHP...

score 2 · Accepted Answer · edited May 23 '17 at 11:58

You can use the following function (https://stackoverflow.com/a/14056768/1845408) to get the selected text:

$('input:button').click(function () {
    var myTextAreaValue = $('#my_textarea').val();
    var selectedText = getInputSelection($('#my_textarea'));
    var updatedText = '<' + $(this).val() + '>' + selectedText + '</' + $(this).val() + '>';
    myTextAreaValue = myTextAreaValue.replace(selectedText, updatedText);
    $('#my_textarea').val(myTextAreaValue)
});


function getInputSelection(elem) {
    if (typeof elem != "undefined") {
        s = elem[0].selectionStart;
        e = elem[0].selectionEnd;
        return elem.val().substring(s, e);
    } else {
        return '';
    }
}


<textarea id="my_textarea" name="my_textarea"></textarea>
<br />
<input type="button" value="b" />
<input type="button" value="i" />
<input type="button" value="u" />

Demo: https://jsfiddle.net/erkaner/0uoshu0s/3/

Hello! :) Thank you for replying. Problem is, it will automatically highlight the whole textarea, I would like it to just edit the highlighted text :( — Michael Jones, Apr 27 '15 at 02:54

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

BTW for anyone who reads this. .click is really old and the newer .on is the best way to go because it covers any possible event that could happen!

I'm not sure what it is this is supposed to accomplish, but I can tell you right off the bat that it's not setting anything to myTextArea and another thing is that once it does update that variable is it supposed to do something with that variable or just leave a variable with the data saved to it. Also for fun don't forget to hit run on everytime you want to change the code.

The first thing I notice here is that you are trying to reinvent the wheel:

If you want to do something like this simply then you should be using libraries. They will take the work load off of you and let you worry about the logic of getting the job done.
JQuery: is where you should be looking first as it is one of many and of the most powerful web libraries at your disposal.
Debugging:

console.log(all the things!!!);

You should be using the console in the developer tools that come with your browser. press f12 on either ie or chrome and click on console to see the logs that you output. I know that Mozilla has one also but unsure on the button to open it. I have mine setup to open automatically if I need to debug.

Here is a pattern that you can use. I included the jquery library in the external dependencies tab already. The bold never would have worked. The html tag is .

Here is our HTML.

<textarea id="my_textarea" name="my_textarea"></textarea>
<br />
<input type="button" value="b"  id="boldButton"/>
<input type="button" value="italic" id="italicButton" />
<input type="button" value="underline" id="underlineButton" />

This is our JS.

// this is "The Standard" and up to date way of doing 
// it to make sure we don't update anything before the page has rendered.
$(document).ready(function(){ 
    $( "#boldButton" ).on( "click", function() {
        console.log("start");
        var myTextAreavalue = "";     
        myTextAreavalue = $("textarea#my_textarea").val();
        console.log(typeof myTextAreavalue);
        var tag = $("input").val();
        console.log(typeof tag);
        var updatedText = ["<" + tag + ">" + myTextAreavalue + "</"+tag+">"];
        $("#my_textarea").replaceWith(updatedText[0]);
        console.log(updatedText);
    });
});

From there I would maybe change out the event .on click to work when every button is clicked if this won't be used with other code elsewhere where there are lots of buttons. Then use an if else to see which button was clicked on and change the data on each one from in there. Happy to help! Have fun with JS! It's so powerful when you start looking into all of the wheels that are already put together for you!

Adding Tags to Highlighted Text in JS Not Working

2 Answers2