Detecting characters between < and > ?

Kerosene · #1 (**permalink**) Jan 4th, 2008, 11:26

I'm trying to create/modify a script that highlights certain words on a page, and changes them into links. So if I had a page about dogs, each occurrence of the word 'dog' will be automatically turned into a link.

So far I've got it working, but it's overwriting any links that are already hard coded into the page. I need the script to ignore anything inside < >, such as links, bold, etc...

Any ideas?

Code: Select all

<script language=JavaScript>
function doHighlight(bodyText, searchTerm) 
{
var newText = "";
var i = -1;
var lcSearchTerm = searchTerm.toLowerCase();
var lcBodyText = bodyText.toLowerCase();
while (bodyText.length > 0) {
    i = lcBodyText.indexOf(lcSearchTerm, i+1);
    if (i < 0) {
        newText += bodyText;
        bodyText = "";
    } else {
        newText += bodyText.substring(0, i) + "<a href=\"http://www.domain.com/search.php?s=" + bodyText.substr(i, searchTerm.length) + "\">"  + bodyText.substr(i, searchTerm.length) + "</a>";
        bodyText = bodyText.substr(i + searchTerm.length);
        lcBodyText = bodyText.toLowerCase();
        i = -1;
     }
}
return newText;
}

function highlightSearchTerms(searchText)
{
searchArray = searchText.split(" ");
var bodyText = document.body.innerHTML;
for (var i = 0; i < searchArray.length; i++) {
    bodyText = doHighlight(bodyText, searchArray[i]);
}
document.body.innerHTML = bodyText;
return true;
}
</script>
 


<body>
The dog chased the cat into the <a href="#">dog house</a>
</body>
<script language=JavaScript>
highlightSearchTerms('cat dog');
</script>

Rakuli · #2 (**permalink**) Jan 4th, 2008, 12:42

You're going to have to use javascript regex to acheive this...

Code: Select all

function doHighlight(bodyText, searchTerm) 
{

bodyText = bodyText.replace(new RegExp("/[^\<^a-b^\>][\s a-z \.\,]*(" + searchTerm + ")[\s a-z \.\,]*/", "ig"), "<a href=\"http://www.domain.com/search.php?s=$1\">$1</a>");
return bodyText;
}

That's a pretty rough regex... not sure if it will work, I'm not far from bed it's 1 am :S..

This will be the only way you will get the replacing to happen without runing hardcoded links

MikeHopley · #3 (**permalink**) Jan 4th, 2008, 17:18

Why not just hard-code the links?

I use code templates in my editor (old version of HomeSite) to convert words into links. So you type "dogs", press "Ctrl-J", and the link is made.

This is more accessible too (links exist without javascript).

Kerosene · #4 (**permalink**) Jan 4th, 2008, 21:53

Thanks Rakuli, I don't know if you made a typo in there somewhere, but it doesn't work. I replaced my doHighlight function with yours, and none of the 'dog' words where turned into links.

@MikeHopley - I'm trying to create a script that I can drop into pages that will automatically create links depending on what people have searched for. If people hit my site looking for dogs, they get dog links - or cat links if they're searching for cats.

EDIT: I've just noticed that webforumz is running Kontera ads - this is basically what I'm trying to create. A script that will search the page for specific words, turn them into links, BUT will also leave any pre existing links alone.

MikeHopley · #5 (**permalink**) Jan 4th, 2008, 23:26

Quote:

Originally Posted by Kerosene

@MikeHopley - I'm trying to create a script that I can drop into pages that will automatically create links depending on what people have searched for. If people hit my site looking for dogs, they get dog links - or cat links if they're searching for cats.

Okay, that makes sense now. That's a good reason for scripting this.

djeyewater · #6 (**permalink**) Jan 16th, 2008, 16:32

I had a go at this, the best I could do using RegExp was to replace all instances of the search term except if it was immediately followed by a '<'.

The following code seems to work okay, but I don't have much experience with javascript/coding in general, so its probably not a very efficient way of doing it. Hopefully someone will post a better solution or point out any improvements that could be made to this code.

HTML: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
<!--

var bodytext;
function myegexp()
{
    //Set the search terms below, seperated by spaces
    var searchTerm = "dog hello";
    
    bodytext = document.body.innerHTML
    searchTerm = searchTerm.split(" ");
    var si;
    for (si=0; si<searchTerm.length; si++)
    {myegexp1(searchTerm[si]);}
    document.body.innerHTML=bodytext;
    bodytext=null;
}

function myegexp1(searchterm)
{    
    var text = bodytext.toLowerCase();
    //Make it lowercase because IE & Opera render the tags in uppercase, while FF & Safari don't. (I think)
    
    //Array to hold the start positions of links
    var startLink = new Array();
    //Array to hold the end positions of links
    var endLink = new Array();
    
    //Loop to find start and end positions of links and put info into relevant array
    var i=0;
    for(i=0; ; i++)
    {
        if (text.indexOf("<a ") !=-1)
        {
            startLink[i] = text.indexOf("<a ");
            text = text.replace("<a", "--");
        }
        if (text.indexOf("/a>") !=-1)
        {
            endLink[i] = text.indexOf("/a>")+3;
            text = text.replace("/a>", "---");
        }
        else
        {
            break;
        }
    }
    
    text = bodytext;
    var SearchTerm = new RegExp("("+searchterm+")", "gi");
    
    //Loop to replace the searchterm, 1st & last run of the loop are placed outside the loop
    var newText = text.substring(0, startLink[0]).replace(SearchTerm, "<a href='http://www.domain.com/search.php?s=$1'>$1<\/a>");
    newText = newText + text.substring(startLink[0], endLink[0]);
    for (i=1; i<endLink.length; i++)
    {
        newText = newText + text.substring(endLink[(i-1)], startLink[i]).replace(SearchTerm, "<a href='http://www.domain.com/search.php?s=$1'>$1<\/a>");
        newText = newText + text.substring(startLink[i], endLink[i]);
    }    
    newText = newText + text.substring(endLink[(endLink.length-1)], text.length).replace(SearchTerm, "<a href='http://www.domain.com/search.php?s=$1'>$1<\/a>");
    bodytext = newText;
    
    //Clear vars
    newText = null;
    text= null;
    SearchTerm=null;
    i=null;
    startLink=null;
    endLink=null;
}

// -->
</script>
</head>

<body onload="myegexp()">
<div id="div1">
<a href="dog">hello</a> dog dog hello <a href="">dog</a> Something else <a href="">hello dog hello</a> dog <strong>dog</strong> dog <a href=""><strong>dog</strong></a> dog
</div>
</body>
</html>

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
wrapper not detecting content	saltedm8	Web Page Design	4	Apr 6th, 2008 22:31
Read First 3 characters and last 4 characters of string	JustinStudios	PHP Forum	2	Apr 4th, 2008 00:01
Detecting form navigation	amits	JavaScript Forum	4	Aug 24th, 2007 16:26
Detecting JRE version using javascript	Nagendra	JavaScript Forum	0	Sep 18th, 2006 05:08
Detecting Flash	skuff	Flash & Multimedia Forum	2	Aug 19th, 2003 08:38

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
Detecting characters between < and > ?