ansaurus

Question

Applying DIV/Span tag to a word by specific co-ordinates

Answer 1

+1 A:

The only method I can think of involves wrapping every word in a span element, and then using document.elementFromPoint(x,y) to get the span element at the given location. Something like this:

function highlightWordAtXY(x, y) {
    // Get the element containing the text
    var par = document.elementFromPoint(x, y),
        // textContent or innerText ?
        t = "textContent" in par ? "textContent" : "innerText",
        // Get the text of the element. No pun intended on the par[t].
        text = par[t],
        result;

    // Wrap a span around every word
    par.innerHTML = text.replace(/\b(\w+)\b/g, "<span>$1</span>");

    // Get the elementFromPoint again, should be a span this time
    result = document.elementFromPoint(x, y);

    // Check that we actually clicked on a word
    if (result == par)
        return false;

    // Wrap HTML text around the text at x, y
    result[t] = '<span class="highlight">' + result[t] + '</span>';

    // Restore the content with the wrapped text
    par.innerHTML = par[t];
}

Example at http://jsfiddle.net/BSHYp/1/show/light/ - click a word and watch it highlight.

Some important caveats here:

Each block of text must be wrapped in an element (such as  or <div>). You should be wrapping paragraphs in  tags anyway,
The element at the given location (x, y) must only have text in it, no child HTML elements. Text nodes with sibling HTML elements will have them removed (e.g. Clicking "Some" or "here" in Some text here will remove the  tags). Dividing them into separate  elements would be the only solution without building a much more complex routine,
IE will throw an "Unknown runtime error" if you try and add a block level element to a  tag,
On very, very, very large blocks of text you might run into performance issues. Break them up where applicable.

Andy E 2010-08-04 11:58:04

Wow :) excellent one. Superb. Just watching the sample link. :)

sugar 2010-08-04 12:03:27

sugar 2010-08-06 11:40:37

on your given sample link - on normal clicks, it removes previous highlights. But after clicking blank space it allows multiple highlights ! :( @ # %

sugar 2010-08-06 11:44:01

@sugar: that's stepping into complicated territory again because the highlight elements become siblings to the text nodes. One option would be to store a list of co-ordinates in an array and loop over each of those co-ordinates from the lines `result = document.elementFromPoint(x,y);` to `result[t] = ...`. This way, you'd be wrapping several words in the span before `par.innerHTML = par[t];`.

Andy E 2010-08-06 11:50:56

@sugar: what you're trying to achieve is complex stuff :-) I'm happy to start you off and help you where you get stuck but the example I wrote was only intended as exactly that - an example. It's likely that it will be far from perfect without much tweaking.

Andy E 2010-08-06 11:53:43

isn't it possible to implement by replacing regex for dividing words into span ?

sugar 2010-08-06 11:53:51

sugar 2010-08-06 11:57:06

@sugar: you're more than welcome :-)

Andy E 2010-08-06 12:07:24

ansaurus

tags:

views:

answers:

Applying DIV/Span tag to a word by specific co-ordinates

related questions