Применить CSS к однословному слову

Question

Можно ли применить CSS таким образом, чтобы он обнаруживал всякий раз, когда в элементе есть определенное слово, и каким-то образом отмечайте это слово? Я знаю, что я могу добавить <span style="...">word</span> или <span class="...">word</span> в строку с HTML, но это не будет автоматически определять слово. Есть ли способ сделать это полностью в CSS? Любая помощь приветствуется.

Answer 1

Theres нет способа сделать это только в css. Вы можете заменить все вхождения слова с упакованной версии и применить стиль, как в вашем примере http://jsfiddle.net/w9VbP/:

JS

var word = 'hello'; 
var replacement = '<span class="theword">' + word + '</span>'; 

var re = new RegExp(word, 'ig'); 

document.body.innerHTML = document.body.innerHTML.replace(re, replacement); 

CSS

.theword 
{ 
    color:red; 
} 

Answer 2

Вы можете легко сделать это с помощью JQuery. Я сохраняю html-разметку тела в var text и заменяю sample на <span class="change">sample1</span> и вернув обновленную разметку html для тела. Очевидно, вам придется поместить этот jQuery в раздел заголовка html, как в противном случае строку sample в функции jQuery также будет заменен на <span class="change">sample1</span>.

Функция JQuery

$('body').each(function() { 
    var text = $(this).html().replace(/sample/g,'<span class="change">sample1</span>'); 
    $(this).html(text); 
}); 

устанавливаемыми сотовыми:

.change{ 
color:red; 
background:blue; 
} 

Working jsFiddle