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, 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.

Barclay

With highlighting, I suppose you mean selecting? – Chorizo

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

Dorian

All good except for the +5 kludge which is presumably the length of the first string. This is very similar to an algorithm in one of the answers to #1981588 – Hesta

@MarkHu: Yes, the + 5 is exactly that, done for brevity. It seems a bit odd to use "ipsum".length instead. The similarity with the other answer I think may be a case of that answer borrowing from one of mine (this one, for example). – Dorian

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. :)

Oldham

Looks nice, but does it work with IE 6/7/8? (Can't test this at the moment.) – Chorizo

No, it doesn't even attempt to support IE. – Dorian

lol shouldn't this be "IE doesn't even attempt to support anything" :p sorry it doesn't work. :p – Oldham

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>

Augmented

The OP wasn't asking to highlight the first two strings. He wanted to highlight the text in between them. – Hesta