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.
