Highlighting a piece of string in a TextArea

Question

I\'m trying to highlight a piece of text in a \"Textarea\". I have a long string in that TextArea:

Lorem ipsum dolor sit amet, consectetur adipisicing elit,          


        

Answer 1

Here's some code that will select a range of text in a textarea in all major browsers, including IE 6+:

function offsetToRangeCharacterMove(el, offset) {
    return offset - (el.value.slice(0, offset).split("\r\n").length - 1);
}

function setSelection(el, start, end) {
    if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
        el.selectionStart = start;
        el.selectionEnd = end;
    } else if (typeof el.createTextRange != "undefined") {
        var range = el.createTextRange();
        var startCharMove = offsetToRangeCharacterMove(el, start);
        range.collapse(true);
        if (start == end) {
            range.move("character", startCharMove);
        } else {
            range.moveEnd("character", offsetToRangeCharacterMove(el, end));
            range.moveStart("character", startCharMove);
        }
        range.select();
    }
}

var textarea = document.getElementById("your_textarea");
var val = textarea.value;
var start = val.indexOf("ipsum") + 5, end = val.indexOf("consectetur");
setSelection(textarea, start, end);

Answer 2

I remember seeing this a while ago... http://www.din.or.jp/~hagi3/JavaScript/JSTips/Mozilla/Samples/NSHTMLTextAreaElement.htm

Its quite complicated and I could never quite be bothered to get my head round it. Dunno if this is what you need, or if you can use it at all. :)

Answer 3

You can't highlight different parts of text in a textarea. You can select a part but not multiple parts and select is not highlighting. You can take the content of your textarea and but it an <div> for example and highlight the phrases by surrounding them with <span class="highlight">...</span>