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

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.

Who is Participating?
Michel PlungjanConnect With a Mentor IT ExpertCommented:
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

HonorGodSoftware EngineerCommented:
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:
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?
rodrix385Author Commented:
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!
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

HonorGodSoftware EngineerCommented:
What values are supposed to be substituted?
rodrix385Author Commented:
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?!

rodrix385Author Commented:
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.
HonorGodSoftware EngineerCommented:
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?
rodrix385Author Commented:
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 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
HonorGodSoftware EngineerCommented:
Sounds like a tooltip, as explained, and demonstrated here
rodrix385Author Commented:
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.
Michel PlungjanIT ExpertCommented:
var qString =; // lose the leading ?
var list = qString.split('&')

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

HonorGodConnect With a Mentor Software EngineerCommented:
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.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.