[kumaraj]

I'm not sure if there's a dedicated jQuery forum, if there is, I apologise.

I'm developing a little application for teachers. The teachers upload a document, and pupils are supposed to correct any grammatical mistakes. The teachers I have spoken to have asked that students want to be able to cilck each individual word and a little prompt box comes up so that pupils can make changes, click submit and bish bash bosh, with a bit of SQL, Javascript and PHP, the teachers have all the data sent to them.

Now I know how to do all the back-end, in fact that's the easy bit. I was hoping jQuery would have a function that would recognise when a word inside a <p> tag was clicked, or a plugin at least that would do it for me, but I couldn't find anything. I then thought the only way I could do it was by wrapping each word in a span tag, now I don't really want to do this, because in some cases, I am told there will be thousands of words to be corrected (a very tedious exercise for children I know!) which means wrapping each word in a span tag will dramatically slow things down, as there's a hell of a lot of other stuff going on too.

But since this is the only solution I can find, I will have to go with it. The script as it is at the moment, does not take into account punctuation and HTML tags, which is extremely important, as pupils will sometimes be required to change just the punctuation. Let me show you the code which I have.

I have a little extract from the children's book "The Gruffalo":

		<p class="text">
			A mouse took a stroll through the deep dark wood.<br />
			A fox saw the mouse and the mouse looked good.<br />
			<i>"Where are you going to, little brown mouse?<br />
			Come and have lunch in my underground house."</i><br />
			"It's terribly kind of you, Fox, but no -<br />
			I'm going to have lunch with a gruffalo."<br />
		</p>

And then I need to wrap each word and piece of punctuation in a span tag:

		<script type="text/javascript">
			$(document).ready(function () {
				$('p').each(function()
				{
					var text = $(this).html().split(' '),
						len = text.length,
						result = []; 

					for( var i = 0; i < len; i++ )
					{
						text[i].split('.');
						result[i] = '<span class="word">' + text[i] + '</span>';
					}
					$(this).html(result.join(' '));
				});        
				
				$('.word').click(function()
				{
					var word = $(this).text();
					alert(word);
				});
			});
		</script>

Whilst debugging, just an alert comes up with the word that has been clicked. So if the user clicks the first instance of the word "mouse", this is what appears in the alert box:

mouse

As you'd expect

However if they click the first instance of the word "wood", this is what appears in the alert box:

wood.
A

Now I know why this happens, I just don't know how to fix it, any help will be greatly appreciated. Thank You in advance!

[Dormilich]

one possibility would be splitting by using a RegExp. there you can match whole words (resp. a sequence of word characters (\w)). though for that you would need to use a replace (otherwise the spaces and punctuation would be left out).

[kumaraj]

Ok, I think I understand but I'm not entirely sure, RegExp has always befuddled me. Would you be willing to give me a helping hand? I know it's a lot to ask but it would really help.

Thank You once again.

[Dormilich]

let’s do a simple demonstration.

var text = $(this).html();
// the RegExp
var re = /(\w+)/g;
// dump the resulting array 
console.log( re.exec(text) );

[kumaraj]

Aah, I'm really sorry, I'm still a little confused, I understand RegEx a bit more now, I don't know how I can execute this so that every word in the text is covered. And another question, is this the best way to do it because if the document is rather large, it could take a long time. Either way, this is what I've concucted, but how can I loop it so the whole text is covered?

					var output;
					var text = $(this).html();
					// the RegExp
					var re = /(\w+)/g;
					// dump the resulting array 
					var re.exec(text) );
					
					output += "<span class='word'>";
					output += re.exec(text);
					output += "</span>";

Again - how do I loop it through?

[Dormilich]

as I said previously, with this approach you will have to do a replace, as the RegExp will exclusively match words.

I could imagine that there is a possibility by using selections, but there you’ll need cross-browser code.

[kumaraj]

Thanks for all your help, really did help, I have plus one'd all of your posts - thanks. For anyone reading this in the future, here is the code I used. I decided to spend a couple of hours and learn RegEx, it's quite confusing but very useful! Here's my final code:

				$('p').each(function() {
					var tagRE = /([^<]*)(<(?:\"[^\"]*\"|'[^']*'|[^>'\"]*)*>)([^<]*)/g,
						match,
						result = [],
						i = 0;

					while(match = tagRE.exec($(this).html())) 
					{
						var text1 = match[1].split(/(\w+)/g),
							len1 = text1.length;

						var text2 = match[3].split(/(\w+)/g),
							len2 = text2.length;
							
						for(var tIdx = 0; tIdx < len1; tIdx++ ) 
							result[i++] = '<span class="word">' + text1[tIdx] + '</span>';            

						result[i++] = match[2];

						for(var tIdx = 0; tIdx < len2; tIdx++ ) 
							result[i++] = '<span class="word">' + text2[tIdx] + '</span>';           
							
						console.log(text1);
						console.log(text2);
					}

					$(this).html(result.join(''));
				});

Note, this also sorts out any HTML tags and so on and so forth

PM me if you have any questions

This post has been edited by kumaraj: 24 August 2012 - 05:12 AM

[Dormilich]

I would have gone for

// untested
var text = $(this).html().replace(/\w+/g, function(match) {
    return '<span class="word">' + match + '</span>';
});
$(this).html(text);

This post has been edited by Dormilich: 24 August 2012 - 12:43 PM

[kumaraj]

Just tested it, both work just as well