Определите четыре * разных * слова в JavaScript и добавьте стиль

Question

Это мой первый пост, но я довольно давно люблю использовать этот сайт в качестве ресурса. Однако сейчас пришло время задать вопрос ...

Я нашел много плагинов для подсветки JavaScript во время моего исследования этого вопроса, но все они сосредоточены на поиске одного слова. Для фанатского сайта, который я создаю (Mega Man Battle Network, для тех, кто заинтересован), я хотел бы найти способ обнаружить слова «Огонь», «Аква», «Элек» и «Лес», поэтому я можно автоматически добавлять стили к ним.

Есть ли какие-нибудь гуру JavaScript, чтобы помочь мне?

Answer 1

Если вам все равно, какое слово найдено, вы можете использовать регулярное выражение, например:

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

На самом деле, теперь, когда я думаю об этом, я все равно буду использовать то же регулярное выражение (только с группами захвата), даже если вам все равно, какое слово вы нашли. Вы можете использовать javascript и jquery для выбора разделов, в которых есть слово, и добавить это слово в качестве имени класса, таким образом применяя любой CSS, который вы определили как связанный с этим классом.

Это регулярное выражение будет выглядеть так:

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

JQuery, который вы будете искать, скорее всего, будет функцией фильтра: http://api.jquery.com/filter/#expr

Когда у вас есть эти объекты, вы можете применять свои стили, используя jQuery и .addClass: http://api.jquery.com/addClass/

Answer 2

Я понял это!

$(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');
});

Теперь мне просто нужно выяснить, как создать обратный вызов для новой функции, чтобы подсветка выполнялась для каждой новой страницы, на которую я захожу.