CODEWITHSUNDEEP
asp.netjavascriptannotations
Kyle Ryan
Kyle Ryan

Reputation: 4471

Dynamically annotate HTML?

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

Upvotes: 2

Views: 4392

Answers (3)

maxenglander
maxenglander

Reputation: 4041

To add to @cweiske's list, there is also Annotator:

Upvotes: 4

cweiske
cweiske

Reputation: 31068

There are several HTML annotation tools available:

Upvotes: 1

joshcomley
joshcomley

Reputation: 28808

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:

&#8203;

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?

Upvotes: 6

Related Questions