Creating a <span> over a range while preserving nesting

[Burke Libbey]

While this is a rails-related question, it has more to do with ruby in
general.

The user selects a range by highlighting it. This is detected with
javascript and fed to ruby. I want to take this range and highlight it.

I'm doing that by adding <span class="anno"></span> around the region.
So that works ok, except that this often causes tag nesting problems.
What I want to do is intelligently add more tag pairs to preserve
nesting.

For example, the range:

this is a</span> test <strong>that <span>uses pretty</span>
bizarre</strong> markup.

Should become:

<span class="anno">this is a</span></span><span class="anno"> test
<strong>that <span>uses pretty</span> bizarre</strong> markup.</span>

I'm not looking for someone to write the code for me (although if you
did, I wouldn't complain); I just need someone to point me in the right
direction. Should I start from scratch with RegExes, or is there a
suitable library?

Thanks.

/burke

 

[Konrad Meyer]

--nextPart2155894.2EC8YW2PYK
Content-Type: text/plain;
charset="utf-8"
Content-Transfer-Encoding: quoted-printable
Content-Disposition: inline

While this is a rails-related question, it has more to do with ruby in
general.
=20
The user selects a range by highlighting it. This is detected with
javascript and fed to ruby. I want to take this range and highlight it.
=20
I'm doing that by adding <span class=3D"anno"></span> around the region.
So that works ok, except that this often causes tag nesting problems.
What I want to do is intelligently add more tag pairs to preserve
nesting.
=20
For example, the range:
=20
this is a</span> test <strong>that <span>uses pretty</span>
bizarre</strong> markup.
=20
Should become:
=20
<span class=3D"anno">this is a</span></span><span class=3D"anno"> test
<strong>that <span>uses pretty</span> bizarre</strong> markup.</span>
=20
I'm not looking for someone to write the code for me (although if you
did, I wouldn't complain); I just need someone to point me in the right
direction. Should I start from scratch with RegExes, or is there a
suitable library?
=20
Thanks.
=20
/burke

You might look into Hpricot by _why or stdlib REXML.

=2D-=20
Konrad Meyer <[email protected]> http://konrad.sobertillnoon.com/

--nextPart2155894.2EC8YW2PYK
Content-Type: application/pgp-signature; name=signature.asc
Content-Description: This is a digitally signed message part.

-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.7 (GNU/Linux)

iD8DBQBGvO9vCHB0oCiR2cwRAjRvAKC0XGz7fLow6ng8Ko61fav4LRee8wCcDqed
jR02QbJe5zIziT+4DgTD2MU=
=mA1c
-----END PGP SIGNATURE-----

--nextPart2155894.2EC8YW2PYK--

 

[Kenneth McDonald]

The easy way to do this is to annotate _all text runs_ in the selected
area; don't try to figure
out if other tags are partly included or not.

In this example, I'll use <A: to mean <span class="anno"> and :A> to
mean a </span> that
closes an "anno" span. <B and B>, <C and C>, etc, stand for arbitrary
other tags. All text
is in lower case.

So, your example is

this is a:B> test <C:that <D:uses pretty>
bizarre:C> markup.

your example of what you wanted then can be written as:

<A:this is a:A>:B><A: test <C:that <D:uses pretty>
bizarre:C> markup.:A>

This is difficult because it requires some amount of parsing to figure out
what markup is 'complete' (both start and end tags present) and what isn't
complete, then various processing to take that info into account. It's a pain
Instead, if you can accept markup like this:

<A:this is a:A>:B><A: test :A><C:<A:that :A><D:<A:uses pretty:A>><A:bizarre:A>:C><A: markup.:A>

Then the algorithm for marking up the selection is simple; just find all
pieces of "real" text in selection
(i.e. not start or end tags), and wrap those pieces in <A: and :A>. This
is very easy to do with regular
expressions.

A potential problem is that you may end up with 'gaps' in your
highlighting. On the other hand,
you're less likely to run into weird CSS problems.

Cheers,
Ken