Highlighting a piece of string in a TextArea

Question

Hi everybody, 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, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident

And I have a function that can extract the first string occurrence that is between the "begin" and "end" vars. For example:

extract("ipsum", "consectetur") // This will give: "dolor sit amet,"

But, what I want is to select the result of the function so the resulting string "dolor sit amet," will be highlighted.

Is it possible? How can I do this?

Thank you,

Regards.

Answer 1

Check out this question http://stackoverflow.com/questions/401593/javascript-textarea-selection

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>

Answer 4

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);