JavaScript getting highlighted text

Question

I am creating a basic text area in HTML5 and I am allowing users to format the text via buttons and drop down menus. Right now my buttons format all the text in the text box, but what I really want to do is format selected parts of the text by allowing the user to highlight the text and then use the buttons.

So far some of my functions are:

function Bold()
{
var target = document.getElementById("Text");
    if(target.style.fontWeight == "normal")
    {
    target.style.fontWeight = "bolder";
    }
    else
    {
    target.style.fontWeight = "normal";
    }
}
function Italic()
{
var target = document.getElementById("Text");
    if(target.style.fontStyle != "italic")
    {
    target.style.fontStyle = "italic";
    }
    else
    {
    target.style.fontStyle = "normal";
    }
}

My text area code:

<textarea id="Text" rows="4" cols="50">Type here</textarea>

As you can see the text area has an ID called "Text". I am guessing that I want to create another function that returns highlighted text and then replace the getElementById with that fuinction call however I do not know the systax or method for doing this.

Any help would be greatly appreciated.

score 1 · Answer 1 · answered Feb 25 '14 at 18:44

1

I recommend using a library unless you would like to write it from scratch for some reason. May be use jquery rather then pure javascript and use the plugin below.

https://github.com/jbr/jQuery.highlightRegex

answered Feb 25 '14 at 18:44

aarti

2,815
1
23
31

score 0 · Answer 2 · edited May 23 '17 at 10:31

0

hope this helps http://html5demos.com/contenteditable
you can refer to this thread for more info

edited May 23 '17 at 10:31

Community

1
1

answered Feb 25 '14 at 18:48

S4beR

1,872
1
17
33

JavaScript getting highlighted text

2 Answers2