How do I tweak this javascript expression? | | |
I have got a bookmarklet for use with Opera which highlights all
occurrences of some text in the displayed page. I find it very
useful.
Sometimes I need to use two or three different colours for different
keywords I want highlighting on the same page. I have done this by
changing the original word 'yellow' for other javascript colour
words.
I know next to nothig about javascript. So I would ask if anyone
knows how I can tweak this javascript bookmarklet code (see below) in
two sepearte ways:
(1) So that I can select a color from a list. This may be as simple
as changing the caption to say "enter 1 for lime, 2 for yellow," etc.
or it might be cleverer.
(2) This is mutually exclusive with (1). In this case the
javascript would prompt me to enter a javascript colour keyword (like
"yellow" or colour code like "FF00FF").
Of course, in each case the javascript needs to ask me what i am
searching for!
The javascript is below. Is anyone able to advise on this?
TIA.
Jane
--------------
javascript:(function(){var count=0, text, dv;text=prompt("Search
phrase (yellow):", "");if(text==null ||
text.length==0)return;dv=document.defaultView;func tion
searchWithinNode(node, te, len){var pos, skip, spannode, middlebit,
endbit, middleclone;skip=0;if( node.nodeType==3
){pos=node.data.toUpperCase().indexOf(te);if(pos>= 0){spannode=documen
t.createElement("SPAN");spannode.style.backgroundC olor="yellow";middl
ebit=node.splitText(pos);endbit=middlebit.splitTex t(len);middleclone=
middlebit.cloneNode(true);spannode.appendChild(mid dleclone);middlebit
..parentNode.replaceChild(spannode,middlebit);++co unt;skip=1;}}else
if( node.nodeType==1&& node.childNodes &&
node.tagName.toUpperCase()!="SCRIPT" &&
node.tagName.toUpperCase!="STYLE"){for (var child=0; child <
node.childNodes.length;
++child){child=child+searchWithinNode(node.childNo des[child], te,
len);}}return skip;}window.status="Searching for
'"+text+"'...";searchWithinNode(document.body, text.toUpperCase(),
text.length);window.status="Found "+count+"
occurrence"+(count==1?"":"s")+" of '"+text+"'.";})(); | | | | re: How do I tweak this javascript expression?
Jane D wrote:[color=blue]
> I have got a bookmarklet for use with Opera which highlights all
> occurrences of some text in the displayed page. I find it very
> useful.
>
> Sometimes I need to use two or three different colours for different
> keywords I want highlighting on the same page. I have done this by
> changing the original word 'yellow' for other javascript colour
> words.
>
> I know next to nothig about javascript. So I would ask if anyone
> knows how I can tweak this javascript bookmarklet code (see below) in[/color]
[color=blue]
> two sepearte ways:
>
> (1) So that I can select a color from a list. This may be as simple[/color]
[color=blue]
> as changing the caption to say "enter 1 for lime, 2 for yellow," etc.[/color]
[color=blue]
> or it might be cleverer.
>
> (2) This is mutually exclusive with (1). In this case the
> javascript would prompt me to enter a javascript colour keyword (like[/color]
[color=blue]
> "yellow" or colour code like "FF00FF").
>
> Of course, in each case the javascript needs to ask me what i am
> searching for!
>
> The javascript is below. Is anyone able to advise on this?
>
> TIA.
>
> Jane
> --------------
>
>
> javascript:(function(){var count=0, text, dv;text=prompt("Search
> phrase (yellow):", "");if(text==null ||
> text.length==0)return;dv=document.defaultView;func tion
> searchWithinNode(node, te, len){var pos, skip, spannode, middlebit,
> endbit, middleclone;skip=0;if( node.nodeType==3
> ){pos=node.data.toUpperCase().indexOf(te);if(pos>= 0){spannode=documen
> t.createElement("SPAN");spannode.style.backgroundC olor="yellow";middl
> ebit=node.splitText(pos);endbit=middlebit.splitTex t(len);middleclone=
> middlebit.cloneNode(true);spannode.appendChild(mid dleclone);middlebit
> .parentNode.replaceChild(spannode,middlebit);++cou nt;skip=1;}}else
> if( node.nodeType==1&& node.childNodes &&
> node.tagName.toUpperCase()!="SCRIPT" &&
> node.tagName.toUpperCase!="STYLE"){for (var child=0; child <
> node.childNodes.length;
> ++child){child=child+searchWithinNode(node.childNo des[child], te,
> len);}}return skip;}window.status="Searching for
> '"+text+"'...";searchWithinNode(document.body, text.toUpperCase(),
> text.length);window.status="Found "+count+"
> occurrence"+(count==1?"":"s")+" of '"+text+"'.";})();[/color]
Hi Jane.
The second option is a lot easier, I'd say...
javascript:(function(){var count=0, text, dv;text=prompt("Search
phrase:", "");hilite=prompt("Hilite
color:", "");if(!hilite)hilite="yellow";if(text==null.. .
....and:
t.createElement("SPAN");spannode.style.backgroundC olor=hilite;middl...
No testing for invalid input, of course. Option (1) might involve a
pop-up window with a listbox...but I'm eating lunch right now. | | | | re: How do I tweak this javascript expression?
On 24 Feb 2005, RobB wrote:
[color=blue]
> Hi Jane.
>
> The second option is a lot easier, I'd say...
>
> javascript:(function(){var count=0, text, dv;text=prompt("Search
> phrase:", "");hilite=prompt("Hilite
> color:", "");if(!hilite)hilite="yellow";if(text==null.. .
>
> ...and:
>
> t.createElement("SPAN");spannode.style.backgroundC olor=hilite;mid
> dl...
>
> No testing for invalid input, of course. Option (1) might
> involve a pop-up window with a listbox...but I'm eating lunch
> right now.[/color]
That works well! Thank you.
J | | | | re: How do I tweak this javascript expression?
OK guys, I am sorry to be a pain but after I was kindly helped to
tweak some javascript in my Opera bookmarklet, I have found a similar
but much better bookmarklet.
Yes, you guessed it ... I want to get thi snew one tweaked
too! Unfortunately the layout of this new one is completely
different to the first one so I can't use the info people kindly gave
me.
Like the first, this bookmarklet highlights chosen text but with an
important difference. This one tells you how many instances it has
found. This count can be very useful!
Sometimes I need to use two or three
different colours for different keywords which I want highlighting on
the same page. I have done this in my new bookmarklet by changing
the original word 'yellow' for other javascript colour words.
How I can tweak this new javascript bookmarklet code (listed below)
to allow me to select the highlighting color?
As before there are two dialogs with the user:
(1) I can select a color from a list. This may be as simple
as changing the caption to say "enter 1 for lime, 2 for yellow," etc.
or it might be cleverer.
(2) This is mutually exclusive with (1). In this case the
javascript would prompt me to enter a javascript colour keyword (like
"yellow" or colour code like "FF00FF").
The new javascript is below. Is anyone able to advise on this?
Thank you.
Jane
================== JAVASCRIPT ========================
javascript:void(s=prompt('Query:',''));s='('+s+')' ;x=new
RegExp(s,'gi');rn=Math.floor(Math.random()*100);ri d='z' + rn;b =
document.body.innerHTML;b=b.replace(x,'<span name=' + rid + ' id=' +
rid + ' style=\'color:#000;background-
color:lime;\'>$1</span>');void(document.body.innerHTML=b);alert('Fou n
d ' + document.getElementsByName(rid).length + '
matches.');window.scrollTo(0,document.getElementsB yName(rid)[0].offse
tTop); |  | Similar JavaScript / Ajax / DHTML bytes | | | /bytes/about
We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights.
Get the best answers to your questions from over 226,533 network members.
|