...

View Full Version : very simple JavaScript: text highligher



lukeprog
08-24-2007, 11:30 PM
I don't know Javascript very well, but I'll bet a script similar to what I'm looking for already exists and I can modify it slightly to meet my needs. I just can't figure out what to search for.

I'd like to create a web form that takes a block of text and, when the user clicks Submit, creates a popup window with the text reproduced but certain words and phrases highlighted (from a phrase list in the JavaScript). A bonus would be to convert all text to uppercase before it is examined, so that text can still be highlighted even if the capitalization is weird (the term list would be all-capital).

Do you know of any similar script I could work from, or can you give me any ideas?

Many thanks!

kosstr12
08-25-2007, 02:02 AM
I'm not sure if you can highlight text within a pop-up box or not, but if you were able to the code wouldn't be to hard to create.:thumbsup:

vwphillips
08-25-2007, 05:00 PM
<!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>
<style type="text/css">
/*<![CDATA[*/
.hlite {
background-Color:#FF6666;font-Weight:bold;
}

.hlite1 {
font-Style:italic;
}
/*]]>*/
</style><script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
// Text HighLighter (25-August-2007) DRAFT
// by VicPhillips http://www.vicsjavascripts.org.uk

var HiliteAry=['to','the','phrase list'];
var HiliteAry1=['web','that'];
var HiliteAry2=['can','that'];




function zxcHiLight(zxcsid,zxcdid,zxchlary,zxccls){
var zxcsobj=document.getElementById(zxcsid);
var zxcd=document.getElementById(zxcdid);
while (zxcd.childNodes.length>0) zxcd.childNodes[0].parentNode.removeChild(zxcd.childNodes[0]);
var zxcclds=zxcsobj.childNodes;
for (var zxc0=0;zxc0<zxcclds.length;zxc0++) zxcES(zxcclds[zxc0].cloneNode(true),{},zxcd);
zxcES(zxcd,{},document.getElementsByTagName('BODY')[0]);
for (var zxc1=0;zxc1<zxchlary.length;zxc1++){
var zxcnodes=zxcTxtNodes(zxcd);
for (var zxc1a=0;zxc1a<zxcnodes.length;zxc1a++){
if (zxcnodes[zxc1a].nodeType==3){
var zxctxtnode=zxcnodes[zxc1a];
var zxctxt=zxctxtnode.data
zxctxt=zxctxt.replace(new RegExp(' '+zxchlary[zxc1],'gi'),' ^')
zxctxt=zxctxt.replace(new RegExp(zxchlary[zxc1]+' ','gi'),'^ ')
var zxcsplit=zxctxt.split('^');
var zxca=zxcES('A',{});
for (var zxc1b=0;zxc1b<zxcsplit.length;zxc1b++){
if (zxc1b>0) zxcES('SPAN',{},zxca,zxchlary[zxc1]).className=zxccls;
zxcES('SPAN',{},zxca,zxcsplit[zxc1b]);
}
zxcnodes[zxc1a].parentNode.replaceChild(zxca,zxcnodes[zxc1a]);
}
}
}
}

function zxcTxtNodes(zxcn){
var zxcary=[];
var zxcclds=zxcn.childNodes;
for (var zxca=0;zxca<zxcclds.length;zxca++){
if (zxcclds[zxca].nodeType==3) zxcary.push(zxcclds[zxca]);
}
var zxceles=zxcn.getElementsByTagName('*');
for (var zxcb=0;zxcb<zxceles.length;zxcb++){
var zxcclds=zxceles[zxcb].childNodes;
for (var zxcba=0;zxcba<zxcclds.length;zxcba++){
if (zxcclds[zxcba].nodeType==3) zxcary.push(zxcclds[zxcba]);
}
}
return zxcary;
}

function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
if (zxcp){ zxcp.appendChild(zxcele); }
if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
return zxcele;
}

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

<body>
<p id="Para1" >
I don't know Javascript very well, but I'll bet a script similar to what I'm looking for already exists and I can modify it slightly to meet my needs. <span>I just can't figure out what to search for</span>.<br />

I'd like to create a web form that takes a block of text and, when the user clicks Submit, creates a popup window with the text reproduced but certain words and phrases highlighted (from a phrase list in the JavaScript). A bonus would be to convert all text to uppercase before it is examined, so that text can still be highlighted even if the capitalization is weird (the term list would be all-capital).

Do you know of any similar script I could work from, or can you give me any ideas?
<br />
Many thanks!
</p>
<input type="button" name="" value="Higlite Para1" onclick="zxcHiLight('Para1','Para2',HiliteAry,'hlite');"/></body>
<input type="button" name="" value="Higlite Para1" onclick="zxcHiLight('Para1','Para2',HiliteAry1,'hlite1');"/></body>
<div id="Para2" style="width:600px;height:200px;background-Color:#FFFFCC;border:solid black 1px;" >
</div>
</form>

</html>

lukeprog
08-27-2007, 05:57 AM
vwphillips,

That is fantastic! Thank you so much!

Is there a way to easily modify your code so that the source material for highlighting is another textbox (in which the person reading the page can type)?

You are too cool.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum