How to Convert Special words into Links using Javascript? - like Kontera does

Posted on 2008-06-16
Medium Priority
Last Modified: 2012-05-05
If you happen to know Kontera - the in-text advertisement system- you'd be familiar with what I am asking.

They simple ask you to place a javascript call with your ID, and then all the special words in your text become links automatically.

I want to do the exact same thing, but with my own list of words, and something very simple.

For example, for every person that places my script in their site, if the words "cat" or "dog" are found, then all those words would be replaced by <a href=...>cat</a> and <a href=..>dog</a>, automatically.

How can I do that with plain javascript as they do!?

Do they use the function replace? or go through the whole page structure using DOM? or regular expressions? How do they do it so as to not mess up the HTML code?

And most importantly, their generated HTML, has no links on the code, when you hover over them. However the links actually work. How is that possible? The code shows it has no link href ="#", although the links still work..

I would really appreaciate if anybody could guide me.

I really appreciate your time.

Question by:rodrix385
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 5
  • 2
LVL 41

Expert Comment

ID: 21801906
No, sorry.  I'm not familiar with Kontera.  But, I do know how I would approach the

1. Build your list of words.
2. In your script file, add an onload event handler
    i.e., something like what is described here: http://www.webreference.com/programming/javascript/onloads/
3. Include CSS for your special words, such that your code changes
    the "word" in the page to something like:

   <span class='special' onclick='doit(this)'>word</span>

  Where "doit()" is the routine that you include to perform the
  page load of the appropriate destination.

Does this make sense?
LVL 75

Accepted Solution

Michel Plungjan earned 320 total points
ID: 21802027
Like this (simple version)
var list = ["I","in"]; 
window.onload=function() {
  var allHTML = document.body.innerHTML;
  for (var i=0;i<list.length;i++) {
    var reg = eval("/"+list[i]+"/g");
    allHTML=allHTML.replace(reg,'<i><a href="" style="background-color:yellow">'+list[i]+'</a></i>')
<h1> My first page </h1>
This is my first web page and I can say anything I want in here - <b>I</b> do that by putting text or images in the body section - where I'm typing right now :)

Open in new window


Author Comment

ID: 21805378
This has been really useful.

However, I am still confused on how to process the keywords for actions.
Keyword highliting is done in my source code, and I managed to use regex with replacements, so as to do
<a href="myscript.php?var1=$1var2=$2> and etc.

What I am saying is that I have the two-part word I am was looking for with $1 and $2 and now I still need to process them so as to get the information to display.

However... I am not sure what technology to use to do that. I want to show a tooltip when the user hovers with the mouse on the highlighted word, and the text to display in the tooltip must be a function of f($1, $2).

The only way I see now, is of having an iFrame with a call to another webpage iframe.php?var1=$1&var2=$2. However, I know Kontera uses no iFrames and I resist completely against using iFrames as they are slow.

What is the other way around? is AJAX what Kontera uses?
Or is it a dynamically created javascript with parameters $1 and $2 what they do? If yes, how would I use a dynamically created javaascript script for displaying different tooltip contents, depending on content?

I really appreciate your time and all what you put for writing your answers
Thanks for everything!
Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

LVL 41

Expert Comment

ID: 21805420
What values are supposed to be substituted?

Author Comment

ID: 21805432
By the way, looking at a page's source code that uses Kontera  ads I can tell you that they DEFINITELY use a dinamically generated javascript.

They tell the user to set a js tag with their id like:
var KonteraID = 9093;

Then the main kontera.js is loaded and inside it, there is a document.write("<SCRIPT src='KonteraEngine.js?" + KonteraID + ....)

So that includes an additional js file that probably has the necessary dictionary of words and actions for that site?
I don't know.. I am really confused of how it works... all the code code is partially encrypted.. .but replacements seem to be there and actions too?

I can't really figure out HOW they are using the dinamically generated js to create all the info for each tooltip.

What could be a solution?!


Author Comment

ID: 21805484
Hi HonorGod:
==What values are supposed to be substituted?
The current regex finds words that start with a-f and end with certain pattern.
In this way, two groups are obtained $1 (a-f) and $2 (pattern)

Then $1 and $2 are combined to retrieve information. For example, for certain $1 and $2, the toolitp should show InformationX and PictureY.

Please feel free to ask me any more questions that could help with the answer.
LVL 41

Expert Comment

ID: 21808068
Interesting.  Given a particular match, e.g., $1 and $2, is there a dictionary, or
Ajax call to a DB or something that is used to look something up, something
else entirely?

btw, Michaels answer is very good.  Is there something that he has missed?


Author Comment

ID: 21808321
Hi HonorGod
==Given a particular match, e.g., $1 and $2, is there a dictionary, or
Ajax call to a DB or something that is used to look something up, something
else entirely?

Yes, exactly. Michaels solution is excellent and very clear -THANKS MIKE :o) - however I am still confused of how the rest works to create somehting similar like the Kontera engine. So please help me to untangle the following.

The same ad service is actually on this website experts-exchange.com when you are logged out, and words are converted into intext ads on mouse hover, by an engine called EchoTopic. It works exactly as Kontera engine, so you might as well see it in action, on this exact same site.

I am looking forward to do the same thing. My question is how does the engine know that when I hover on the highlithed word "javascript" that an advertisement about a "Javascript course" must show up? It must have some kind of database lookup or data lookup...

There must be some kind of query that works internally either with AJAX or dynamic Javascript that loads the content on the tooltip. With Kontera, I have discovered that there is a dynamic javascript, but I wouldn't know how to use that myself.

Would the dynamic javascript have the database needed to fill in the tooltips?

And if I go AJAX, that would mean increasing server load drastically, wouldn't it be? For each tooltip the user hovers on, a call to the server is made- but maybe that isn't as much?. Wouldn't it be better to have a single javascriptt generated dinamically with all the data? I might have repeated content, so maybe the 'javascript' word is repeated many times on MY text, would that mean having different AJAX calls even though the requested content would be the same. Wouldn't then AJAX be a throwing away bandwith and maybe its betteer to go js?

But then- I wouldn't want to reveal the whole algorithm publicly- half javascript half server?
mm... quite puzzled. I don't know which one is the correct way to go.

So yes, I want to do the same thing, and I would have a dictionary or DB or an array (or whatever can store data) and retrieve text and an image using parameters $1 and $2.

What should I use? AJAX, or dynamic javascript? And how should I tag the content.
Should I do <a id="special" specialtag=$1 specialtag2=$2 href=...>  and then have a function that processes all elements with id 'special'?
How do theirs work?! It works so fast, no loading..

I really appreciate both your time :)


P.S: Raised points to 145
LVL 41

Expert Comment

ID: 21808808
Sounds like a tooltip, as explained, and demonstrated here


Author Comment

ID: 21809492
Hi HonorGod,
Thanks for the info, but I am not looking for the code for creating a tooltip.

I am looking for a way of retrieveing the data to fill the tooltip.
The question is should I use AJAX? iFrame? Dynamic javascript with document.write to create span tags with information?

It's a design question. What do you think it's best, what does kontera or this other system you think it uses?
What minimizes server load while maximizing user experience?

I am raising to 160.
LVL 75

Expert Comment

by:Michel Plungjan
ID: 21809925
var qString = location.search.substring(1); // lose the leading ?
var list = qString.split('&')

now you can send page.html?word1&word2&word3

LVL 41

Assisted Solution

HonorGod earned 320 total points
ID: 21811949
To answer your question, it depends...

If the amount of information available for your tooltips is not too big, you could
certainly have it available when the page is loaded, thus minimizing the number
of lookups that need to be done at the server.  However, this can impact your
page load time.  So, it is a trade off.

If you have your tooltip info on the server, perhaps in a database, then only
those messages that need to be retrieved are retrieved.  You could also have
a staging, or caching effect by determining "frequently requested tips", and
have them "pre-loaded" for quick display.

It's a balancing act of trade offs.

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question