...

View Full Version : Highlight A Text Search Javascript Help Needed



aacdrw
09-27-2008, 01:27 AM
Hello,

I found this javascript highlight all text search script and it works great, but when entering a keyword, it doesn't go to the first highlighted word (if there are a couple of found highlighted words and the first one is lower on the page to where you need to scroll). Can anyone offer the code needed so it will go to the first found highlighted keyword (so i don't have to scroll down the page looking for the highlight)?

Here's the site that offers the script: http://4umi.com/web/javascript/hilite.php

Any help would be greatly appreciated!

Thanks.

vwphillips
09-27-2008, 11:57 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var times = 0;

function hex( n ) { return ( n<16 ? '0' : '' ) + n.toString(16); }

function hi( f ) {
f = f.elements, s = f.query.value;
f.result.value = highlight( s ) + 'x ' + s;
return false;
}

function highlight( f, o ) {
s=document.getElementById('query').value;
if( !s ) { return 0; }
var d = window.document, f = d.forms.f.elements;
if( !f.regex.checked ) { s = s.replace( /([\\|^$()[\]{}.*+?])/g, '\\$1' ); }
if( /^\s*$/.test( s ) ) { return 0; }
if( !f.phrase.checked ) { s = s.split( /\s+/ ).join( '|' ); }
o = [ o || d.documentElement || d.body ];
var hs=document.getElementsByTagName('A');
for (var zxc0=0;zxc0<hs.length;zxc0++){
hs.set=false;
}

var r = new RegExp( s, f.cases.checked ? 'g' : 'gi' ),h = d.createElement( 'A' ), i = 0, j, k, l, m, n=0, t;
h.style.color = '#000';
h.style.backgroundColor = '#'+( times%2 ? ''+hex(((times+1)%5)*51)+'ff' : 'ff'+hex((times%5)*51)+'' )+'00';
h.set=true;
times++;
do {
m = o[i];
if( m.nodeType===3 ) {
r.lastIndex = 0;
l = r.exec(m.nodeValue);
if( l !== null ) {
k = l[0].length;
if( r.lastIndex > k ) {
m.splitText( r.lastIndex - k );
m = m.nextSibling;
}
if( m.nodeValue.length > k ) {
m.splitText(k);
o[i++] = m.nextSibling;
}
t = h.cloneNode( true );
t.appendChild( d.createTextNode( l[0] ) );n++;
m.parentNode.replaceChild( t, m );
}
} else {
j = m.childNodes.length;
while ( j ) { o[i++] = m.childNodes.item( --j ); }
}
} while( i-- );
for (var zxc0=0;zxc0<hs.length;zxc0++){
if (hs[zxc0].set){
window.scrollTo(zxcPos(hs[zxc0])[0],zxcPos(hs[zxc0])[1]);
break;
}
}
return n;
}

function zxcPos(zxcobj){
zxclft=zxcobj.offsetLeft;
zxctop=zxcobj.offsetTop;
while(zxcobj.offsetParent!=null){
zxcpar=zxcobj.offsetParent;
zxclft+=zxcpar.offsetLeft;
zxctop+=zxcpar.offsetTop;
zxcobj=zxcpar;
}
return [zxclft,zxctop];
}



function unhighlight( s, o ) {
var d = window.document;
s = s.replace(/([\\|^$()[\]{}.*+?])/g, '\\$1').split( /\s+/ ).join( '|' );
o = o || d.documentElement || d.body;
var a = o.getElementsByTagName( 'span' ), i = a.length, j,
re = new RegExp( '^' + s + '$', 'i' );
while( i-- ) {
j = a[i].firstChild;
if( j ) {
if( j.nodeType===3 && re.test( j.nodeValue ) ) {
a[i].parentNode.replaceChild( d.createTextNode( j.nodeValue ), a[i] );
}
}
}
return false;
}

/*]]>*/
</script></head>

<body>
<form action="?f" id="f" onsubmit="return hi( this ); return false;">
<fieldset>
<legend>Your <i>q</i>uery</legend>
<label for="query" title=" Alt+Q ">Search: <input type="text" value="unknown" class="it" id="query" name="query" size="70" accesskey="q"/></label>
<input type="button" class="key" name="find" value=" Find " onclick="return highlight(this.form); return false;"/>

<input id="tst" type="text" class="it" name="result" size="70" style="border:0" readonly="readonly" onclick="unhighlight(this.value.substring(this.value.indexOf('x ')+1))"/><br />
Options: <label for="phrase"><input type="checkbox" id="phrase" name="phrase"/>phrase</label>
<label for="cases"><input type="checkbox" id="cases" name="cases"/>case-sensitive</label>
<label for="regex"><input type="checkbox" id="regex" name="regex"/>regex</label>
</fieldset>
</form>
<div style="height:500px;" ></div>
Lorem Ipsum is the well known dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<div style="height:500px;" ></div>
Lorem Ipsum is the well known dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


</body>

</html>

aacdrw
09-27-2008, 11:22 PM
That works like a charm. Thank you so much for the help vwphillips!

aacdrw
09-27-2008, 11:43 PM
Hi vwphillips, thanks again for the help. Another quick question on the code you supplied - there are options (phrase, case sensitive and regex). I managed to delete the regex from the form contents and deleted it off of the script and it works, but when i try to delete the other options (whether just deleting it off of the form contents or trying to delete the portions off of the script), the script doesn't work. I would greatly appreciate any help you could offer to get the options (phrase and case sensitive) out of the script.

Thank you!

vwphillips
09-28-2008, 09:29 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var times = 0;

function hex( n ) { return ( n<16 ? '0' : '' ) + n.toString(16); }

function hi( f ) {
f = f.elements, s = f.query.value;
f.result.value = highlight( s ) + 'x ' + s;
return false;
}

function highlight( f, o ) {
s=document.getElementById('query').value;
if( !s ) { return 0; }
var d = window.document, f = d.forms.f.elements;
o = [ o || d.documentElement || d.body ];
var hs=document.getElementsByTagName('A');
for (var zxc0=0;zxc0<hs.length;zxc0++){
hs.set=false;
}
s = s.split( /\s+/ ).join( '|' );
// var r = new RegExp( s,'gi' ); // Not Case Sensitive
var r = new RegExp( s,'g' ); // Case Sensitive
var h = d.createElement( 'A' ), i = 0, j, k, l, m, n=0, t;
h.style.color = '#000';
h.style.backgroundColor = '#'+( times%2 ? ''+hex(((times+1)%5)*51)+'ff' : 'ff'+hex((times%5)*51)+'' )+'00';
h.set=true;
times++;
do {
m = o[i];
if( m.nodeType===3 ) {
r.lastIndex = 0;
l = r.exec(m.nodeValue);
if( l !== null ) {
k = l[0].length;
if( r.lastIndex > k ) {
m.splitText( r.lastIndex - k );
m = m.nextSibling;
}
if( m.nodeValue.length > k ) {
m.splitText(k);
o[i++] = m.nextSibling;
}
t = h.cloneNode( true );
t.appendChild( d.createTextNode( l[0] ) );n++;
m.parentNode.replaceChild( t, m );
}
} else {
j = m.childNodes.length;
while ( j ) { o[i++] = m.childNodes.item( --j ); }
}
} while( i-- );
for (var zxc0=0;zxc0<hs.length;zxc0++){
if (hs[zxc0].set){
window.scrollTo(zxcPos(hs[zxc0])[0],zxcPos(hs[zxc0])[1]);
break;
}
}
return n;
}

function zxcPos(zxcobj){
zxclft=zxcobj.offsetLeft;
zxctop=zxcobj.offsetTop;
while(zxcobj.offsetParent!=null){
zxcpar=zxcobj.offsetParent;
zxclft+=zxcpar.offsetLeft;
zxctop+=zxcpar.offsetTop;
zxcobj=zxcpar;
}
return [zxclft,zxctop];
}



function unhighlight( s, o ) {
var d = window.document;
s = s.replace(/([\\|^$()[\]{}.*+?])/g, '\\$1').split( /\s+/ ).join( '|' );
o = o || d.documentElement || d.body;
var a = o.getElementsByTagName( 'span' ), i = a.length, j,
re = new RegExp( '^' + s + '$', 'i' );
while( i-- ) {
j = a[i].firstChild;
if( j ) {
if( j.nodeType===3 && re.test( j.nodeValue ) ) {
a[i].parentNode.replaceChild( d.createTextNode( j.nodeValue ), a[i] );
}
}
}
return false;
}

/*]]>*/
</script></head>

<body>
<form action="?f" id="f" onsubmit="return hi( this ); return false;">
<fieldset>
<legend>Your <i>q</i>uery</legend>
<label for="query" title=" Alt+Q ">Search: <input type="text" value="unknown" class="it" id="query" name="query" size="70" accesskey="q"/></label>
<input type="button" class="key" name="find" value=" Find " onclick="return highlight(this.form); return false;"/>

<input id="tst" type="text" class="it" name="result" size="70" style="border:0" readonly="readonly" onclick="unhighlight(this.value.substring(this.value.indexOf('x ')+1))"/><br />
</fieldset>
</form>
<div style="height:0px;" ></div>
Lorem Ipsum is the well known dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<div style="height:500px;" ></div>
Lorem Ipsum is the well known dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


</body>

</html>

aacdrw
09-29-2008, 08:26 AM
thanks again vwphillips - works like a charm.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum