Thank you so much bibby for trying to answer my question so
thoroughly. My call for help was in fact dictated by lack of time. I
thought the solution was somehow going to be obvious, but now it see I
was totally wrong.
On 27 sep, 16:47, bibby <li...@bbby.org> wrote:
> Hi rossenbere,
> There's something about "text" that you should be aware of; text is
> rendered as tree nodes just like other elements, the difference being
> that they are unique types. ( elm.nodeType == 1 == DOM Element ,
> elm.nodeType == 3 == TextNode ).
>
> In the example, "a div with 2 paragraphs. Each paragraph has text",
> it might be common to think of the tree having 3 nodes, div, p, p.
> But the truth is that there are 5, because each paragraph has a child
> node of a TextNode type. Browsers need this to parse things out.
>
> Here's why this is important.
> What you're proposing to do (which is by no means crazy or not-
> doable ) is to tag one of the words within the text node and create a
> behavior for it. Selection is certainly going to be the hard part
> here, and that's because the only selectable element is the entire
> text node. This is going to have to be broken up.
>
> If there is a <p> , and that p contains "foo bar baz" ; there is
> one p with 1 child text node.
> To mark up a <p>, and that p contained "foo <span>bar</span> baz" ;
> now it has 3 child nodes, 1 of them a DOM node, and the other 2 text
> nodes.
>
> So your initial operation should be performed on the paragraph.
> Get it's .html() ( not .text() just to be tag-safe ), and .split()
> using a RegExp matching the word or words you wish to tag. The
> resulting array would be everything but those words. For the spaces
> in between, create a tag (span would do) with a className you can find
> later. $("<span/>).addClass('dict_word').text(word);
>
> Clear the contents of the paragraph and begin rebuilding it a piece at
> a time : TextNode[0] , span.dict_word, TextNode[1], span.dict_word.
>
> I started a small program as a proof of this using two words to tag,
> but I ran into some problems, so keep these issues in mind.
> When it came time to insert a new span tag, I wasn't entirely sure if
> I was supposed to have the first word or the second from my split
> list. It also wasn't clear to me if a tagged word should have been the
> first or last word in a paragraph.
>
> I will share, at least, the first part where I identify which
> paragraphs need work:
> $(document).ready(function()
> {
> var words = ['ipsum', 'aptent'];
> var pattern = '('+words.join('|')+');
> var regex = new RegExp( pattern , 'i' );
>
> $('p')
> .filter(function()
> {
> return regex.test( $(this).text() );
> })
> .each(function()
> {
> // do stuff
> });
>
> });
>
> Ideally, in the end, you'd be able to dict_ize the words by className
>
> $('.dict_word').each( Dictionary.link );
> ( assuming Dictionary.link is a method that does the business )
>
> Hope this helps
>
> On Sep 27, 9:52 am, rossenbere <hubert.ca...@telenet.be> wrote:
>
>
>
> > Hi
>
> > I'm a newbie.
> > I just don't know how to construct the jquery selector syntax to pick
> > up a single word on click from within let's say a <p> element and then
> > trigger some function in which the selected word is going to be used.
> > (Something like when you click a word on an HTML page and get the
> > meaning of that word from a dictionary-program - e.g. the COED Concise
> > Oxford English Dictionary).
> > I'd be glad if someone could help me out on this.
