wrapping text using jQuery

Question

I was wondering how I might search out any text in a document and wrap it in a link structure using jQuery.

For example - Search the whole document for the text 'target heart rate' and transform it into

<a href="jvscrt:popup('heartrate.cfm')">target heart rate</a>

Any ideas?

thanks! Chris

Answer 1

You'll need to:

• Have a conversion rule - i.e. "text to convert" -- url -> "convert.cfm". You can achieve this with a simple hash array.

• Now, you'll need to search for the text() contained inside all your matching DOM elements. If you find it, you'll need to split the contents in 3 parts: before and after the text + the text itself.

• Now create the anchor and join the three parts together and replace the old content.

That's how text highlighint, for example, is done in most cliet-side scripts.

Since you asked for just an idea, I'll leave the fun coding for yourself ;)

Answer 2

Use the find method along with contains. Probable something like

$("p").find(":contains('target heart rate')")
      .wrapInner($("<a href="jvscrt:popup('heartrate.cfm')"></a>"));

or something like that.

I could be totally wrong. Check http://docs.jquery.com

Answer 3

jQuery wrap function maybe?

Also consider the text highlight plugin which highglights keywords. instead of highlighting you could create links out of them. More specifically the following lines:

var spannode = document.createElement('span');
spannode.className = 'highlight';
// change the above to create an anchor and add href etc

Answer 4

This is close:

var findIt = 'Javascript';

$.expr[":"].containsNoCase = function(el, i, m) {  
    var search = m[3];
    if (!search) return false;
    // we'll use text to find what we want...
    return eval("/" + search + "/ig").test($(el).text());
};  


$("p:containsNoCase('"+ findIt +"')").each(function() {
  // and then html when we are ready to replace
  var ht = $(this).html();  
  var pos= ht.indexOf(findIt);
  var start = ht.substring(0, pos);  
  var end = ht.substring(pos+findIt.length);

  $(this).html(
      start
      +'<a href="javascript:alert(\'heartrate.cfm\')">'+findIt+'</a>'+end);

});

But what you are looking for is a tough thing to provide. You want to search only the text of elements, but need to update the HTML content of the element where it was found (in order to add links). When you go back and use html() to update the element, you'll end up potentially replacing things you don't mean to.

For example this is fine:

<p>Hey, Javascript is fun.</p>

Where as this has issues:

<p><img src="something/Javascript.png">Whee, yaa Javascript</p>

The text within the image src is replaced errantly. If there's a way you can find the position of the matching text within an element not surrounded by, or within a tag, it would be possible to replace it cleanly. Of course you can use text(), but then you can't use any HTML in what you are adding back in :(. Maybe I'll check back and see if anyone has anything else to offer.

Answer 5

I'm such a gomer:

Text highlighting plugin for jQuery.

You can probably use this to get the job done. Just change out the wrapping with your anchor (your link) element.