-1

This is my first post, but I've loved using this site as resource for quite awhile now. However, the time has now come for me to ask a question...

I have found plenty of JavaScript highlighter plugins during my research into this question, but they all focus on finding one word. For a fan-site I am creating (Mega Man Battle Network, for those interested), I would like to find a way to detect the words, "Fire", "Aqua", "Elec", and "Wood", so I can automatically add styling to them.

Any JavaScript gurus out there to help me?

NetOperator Wibby
  • 1,354
  • 5
  • 22
  • 44

2 Answers2

2

If you don't care which word is found, you could use a regex like this:

/\bfire|aqua|elec|wood\b/gi

Actually, now that I think about it, I'd still use the same regex (only with capture groups) even if you did care what word you found. You could use javascript and jquery to select sections that have a word and add that word as a class name, thus applying whatever CSS you've defined as associated with that class.

That regex would look like this:

/\b(fire|aqua|elec|wood)\b/gi

The jQuery you'll be looking for will likely be the filter function: http://api.jquery.com/filter/#expr

Once you have those objects, you can apply your styles using jQuery and .addClass: http://api.jquery.com/addClass/

D. Patrick
  • 2,894
  • 26
  • 37
  • Hi Patrick, I am not familiar with regular expressions. Would you have an example of how I could implement this? – NetOperator Wibby Jan 24 '12 at 19:51
  • Sure, here's an example. If you execute this against this page, all of your spans that have one of those words in them will get a red border: $('span') .filter(function() { return this.innerHTML.match(/\b(fire|aqua|elec|wood)\b/gi); }).css("border", "1px solid red"); – D. Patrick Jan 24 '12 at 22:08
  • That didn't paste that well. Here's a gist: https://gist.github.com/1673028. Your initial selector would be $("div.element") instead. – D. Patrick Jan 24 '12 at 22:10
  • Also, if your objective is to style only the word itself, you'll do as Evan said and wrap the word in a span and then replace the original word. In fact, you could use the script I provided in the gist to find every span that has one of these words and then do a string replace to replace it. – D. Patrick Jan 24 '12 at 22:15
  • Alrighty. I updated the gist from above: https://gist.github.com/1673028 It includes a basic example and an example where it applies styles to each word found. I'm not recommending you use that code in your actual application. You'd want to use classes and stylesheets, but I think it makes a decent demonstration. You can run it against this page using debugging tools in chrome or ie. – D. Patrick Jan 24 '12 at 22:25
  • Hi Patrick, my apologies for the late reply. I am still unable to get this to work properly, if at all. Thanks a lot for your help thus far though! I am still going to try and figure it out. – NetOperator Wibby Jan 27 '12 at 01:08
0

I figured it out!

$(document).ready(function(){
    $('div.elemental:contains("Aqua")').addClass('aqua');
    $('div.elemental:contains("Fire")').addClass('fire');
    $('div.elemental:contains("Wood")').addClass('wood');
    $('div.elemental:contains("Elec")').addClass('elec');
});

Now I just need to figure out how create a callback to a new function so that the highlighting is done to each new page I go to.

NetOperator Wibby
  • 1,354
  • 5
  • 22
  • 44