Dynamically annotate HTML?

Question

I would like to do the following in an ASP.NET page, for both Internet Explorer and Firefox:

1. Display an uploaded HTML document in a window.
2. Allow the user to highlight an arbitrary section with the standard text cursor, and press a "leave comment here" button.
3. Save the exact start and end points of the highlight -- not just the highlight contents -- and associate them with a unique ID.
4. Highlight everything between the start and end points by overlaying a <span class="highlight"> tag.

1 and 2 are no problem. But for 3 and 4... is this possible? If so, how can I go about this?

If this can't be done for an HTML document, how about plain text? (For HTML, we can assume it is relatively simple. For instance, I envision this supporting word documents saved as HTML.)

Answer 1

Well you have a problem.

Suppose this text:

Hello my
name is
Josh and
this is an
example for you

Which underneath was like this:

<span>
  Hello my
  <span>
    name is<br/>
    Josh and
  </span>
  <span>
    this is an<br/>
    example for you
  </span>
</span>

Then suppose I select:

Josh and
this is an

The HTML I've selected is:

  Josh and
</span>
<span>
  this is an

So if you wrap a span around that, you'll end up with some screwed up HTML.

So, I would recommend the following:

• Get the selected text with javascript
• Strip the HTML tags from the selected text

You end up with this:

function getSelectedTextNoHtml() {
    return getSelectedText().replace(/(<([^>]+)>)/ig, "");
}

function getSelectedText() {
    if (window.getSelection)
     return window.getSelection();
    else if (document.getSelection)
     return document.getSelection();
    else if (document.selection)
     return document.selection.createRange().text;
    return "";
}

You could then take the HTML of the whole document, strip the HTML tags and find the index of the selected text within the text version of the document.

I can even think of (ugly but workable) ways of getting the index of the selection in HTML. But I warn you if you want them they're ugly.

There are even very ugly ways to get a span neatly around the selected text with the unique ID you want. Of course there's always ways to do stuff. Everything is just an algorithm away. But it would involve a good days work honing it down!

I've posted enough, if you want me to elaborate, just ask!

UPDATE:

OK, you asked for it :)

• Take the selected text and log it somewhere
• Replace the selected text temporarily with something utterly unique
• Find the index of that utterly unique text
• Change the text back

If you want to do it discreetly without their text flashing and changing, you could try taking advantage of the HTML zero-width space:

​

Stick that in front of it 100 times and find the index of 100 zero width spaces!

Of course, it will fail if their document has 100 zero-width spaces and their selected text elsewhere, but at this point I say "let it fail" :)

Howzat?

Answer 2

There are several HTML annotation tools:

• h**p://code.google.com/p/adnotatio/
• http://code.softwarefreedom.org/projects/stet
• h**p://code.google.com/p/adnotatio/wiki/References