View Full Version : Text Wrapper

04-08-2009, 03:32 AM
Hi guys,

I have this code whereby the user can select any text and when a button is clicked, the textcolor background changes. However, I noticed a small issue with my code: it highlights the first occurence of the selected word/s. In other words, if I highlight the word "the cat" and call the function, it will change the text color background of the first instance of the sentence "the cat" in the document it finds.
Can someone please help me out?
Also it only seems to highlight just plain text on web page.

function highlight()

var workArea = "";
workArea = content.document.getElementsByTagName('body')[0];
var openTag = '<span style="background-color:'red'>';
var closeTag = '</span>';
workText = content.getSelection().getRangeAt(0);
var currReplace = new RegExp("("+workText+")");
workArea.innerHTML = workArea.innerHTML.replace(currReplace, openTag+"$1"+closeTag);


thanks once again
kind regards


04-08-2009, 09:20 AM
Your script is doing exactly what you ask it to. The line
workText = content.getSelection().getRangeAt(0); selects the text you highlight ("the cat"), then the line
workArea.innerHTML = workArea.innerHTML.replace(currReplace, openTag+"$1"+closeTag);looks for that text within workArea (your <body>) and replaces it. It does not look just at your selection, but the body as a whole.

You need to identify the selected area more precisely. As it stands, it will only work if the text you want to change is the first (or only) instance.

If we knew more precisely why you were doing this, we could perhaps be more helpful.


04-08-2009, 12:55 PM
Thanks alot Actinia,

I am inserting this script on any web page I access through a Mozilla firefox extension. So basically that script would work on any web page. How can i identify the text selected?

thanks again


04-10-2009, 11:24 AM
any ideas? anyone?

04-10-2009, 04:36 PM
To make a JS RegExp match more than one instance of your search in a string, you'd need to make it global... i.e:

var currReplace = new RegExp("/"+workText+"/g");

Try it, see how that goes for you.

04-10-2009, 07:05 PM
Thanks for your input Eldarrion but I dont want it to match any instance of that string, I want to match just that string!

04-10-2009, 07:30 PM
Thanks for your input Eldarrion but I dont want it to match any instance of that string, I want to match just that string!

You yourself are asking for something that will match more than one 'occurrence' of your own string... and what I'm offering does do exactly that. It won't match anything but the string you give it to match... but it will look for it more than once rather than matching once and stopping there. Am I misunderstanding your desire here or something?

04-10-2009, 11:10 PM
Hi Eldarrion ,

Thanks for your replies. I think I wasn't that clear. for example assume I have the following text:

"The cat and the dog ran out of the house and never came back. The cat and the dog lived with me for several years."

If I highlight the second phrase "The cat and the dog" (in bold), and call the wraptext function as displayed in the first post, the first phrase gets highlighted (in italic).



rnd me
04-11-2009, 10:59 PM
you don't want to use a regexp or a string replace at all.

what you need to do is more complex.
a selection could span multiple tags, or part of a tag.
You can only style a whole tag at a time.
so, basically, you need to wrap tags around the ends, and find every tag in the middle of the selection.

one you have a list of all the tags involved in the selection (including the new ones at the end), you can style each tag on the list however you want.

selection APIs vary between IE and others, and it's a bit of a pain to work with.

you might be able to search around for "dom javascript selection" and find the pieces of code you need to string together to make it work correctly.