Javascript text highlighter
I was reading the ferret shortcut and it said it could do highlighting but you could also implement it externally. It triggered a thought "why not do it in javascript". I used the light boxes gone wild javascript code a while back and liked what they did with the class names.
Sorry I only syntax highlight ruby code.
All you need to do is give the div you want to highlight the words in with a highlight_me class and a highlight_me attribute. If you need a space use an underscore is the_cow will highlight "the cow". I need to look in to the regex more. I want to say /(?:\s|^)word(?:\s|$)/ but it doesnt seem to work. So quick in quickly gets highlighted with this version. What I like about this is it simple, easy, flexible, and you can toggle it by removing and add the class highlight_me to the div. I am sure the code can be more compact but Javascript is not my strong point. I will add this bit in to my svn repo.
Pre did not link all the tags so the unaltered version is here http://www.svn.stephenbeckeriv.com/code/highlighting/javascript_word_highlight.html
Sorry I only syntax highlight ruby code.
<%= javascript_include_tag 'prototype' %>
[script]
function highlight_things(){
var max_span = 3;
var divs = $$("div.highlight_me");
divs.each(function(div){
var words = div.readAttribute("highlight_me").split(" ");
words.each(function(word){
word = word.gsub("_"," ");
var regx = new RegExp(""+word+"");
div.innerHTML = div.innerHTML.gsub(regx,function(match){
return ""+match[0]+"";
})
})
})
}
[/script]
[style]
.highlight_me span{
background-color:red;
}
.highlight_me span#highlight_me_1{
background-color:blue;
}
[/style]
[div class="highlight_me" highlight_me="quick wizard fox"]
The quick brown fox jumps over the lazy dog, The five boxing wizards jump quickly
[/div]
[script]
#after page loads
highlight_things();
[/script]
All you need to do is give the div you want to highlight the words in with a highlight_me class and a highlight_me attribute. If you need a space use an underscore is the_cow will highlight "the cow". I need to look in to the regex more. I want to say /(?:\s|^)word(?:\s|$)/ but it doesnt seem to work. So quick in quickly gets highlighted with this version. What I like about this is it simple, easy, flexible, and you can toggle it by removing and add the class highlight_me to the div. I am sure the code can be more compact but Javascript is not my strong point. I will add this bit in to my svn repo.
Pre did not link all the tags so the unaltered version is here http://www.svn.stephenbeckeriv.com/code/highlighting/javascript_word_highlight.html
