Applying CSS to words/letters in html document using jQuery or PHP

Question

Possible Duplicate:
Find text string in jQuery and make it bold

Suppose if i have a html document as this

<div>
hi this is one line<br>
<p>This is second line</p>
<p>This 'word' is within quote</p>
<p>Another 'lorem ipsum' in quote</p>
</div>

How do i apply different CSS only to the word 'line' which occurs many times in my document and also different CSS to all words that appear inside quotes using jQuery. some kind of pattern matching and applying css

any script available to do so ?

sdespont · Answer 1 · 2012-11-25T09:21:29.400

2

You could use JQuery contains selector like this code :

http://jsfiddle.net/z4ZwF/

function replaceText(textToSearch,classToApply)
{
  $('div').html($('div').html().replace(new RegExp(textToSearch, 'g'),"<span class='"+classToApply+"'>"+textToSearch+"</span>"));
}

Example : replaceText("'lorem ipsum'",'red') or replaceText("line",'red')

EDIT

Add quote wrapping in search and replace : http://jsfiddle.net/z4ZwF/3/

function replaceText(textToSearch,classToApply,searchAndWrapQuote)
{
    searchAndWrapQuote = searchAndWrapQuote || false;
    quote = (searchAndWrapQuote) ? "'" : "";

  $('div').html($('div').html().replace(new RegExp(quote+textToSearch+quote, 'g'),"<span class='"+classToApply+"'>"+quote+textToSearch+quote+"</span>"));
}

replaceText("lorem ipsum",'red',true)

edited Nov 25 '12 at 09:21

answered Nov 25 '12 at 08:50

sdespont

13,915
9
56
97

Added fiddle http://jsfiddle.net/z4ZwF/ – sdespont Nov 25 '12 at 09:07
but what if i have to apply css to all words including quotes that are enclosed within quotes ? – Jigar Jain Nov 25 '12 at 09:12
Enclose the text by quotes like replaceText("'lorem ipsum'",'red') http://jsfiddle.net/z4ZwF/2/ – sdespont Nov 25 '12 at 09:14
i mean any word by default which is enclosed withing quotes..we shudnt hard-code the value between quotes.. – Jigar Jain Nov 25 '12 at 09:15
btw i liked ur code..its short and simple :) – Jigar Jain Nov 25 '12 at 09:16
I have added an example : http://jsfiddle.net/z4ZwF/3/ – sdespont Nov 25 '12 at 09:22

score 0 · Answer 2 · answered Nov 25 '12 at 08:58

You can't apply any style directly to 'line' word. What you need is to parse the content and wrap your 'line' to some tag - for example and after that you can apply some styles in your css to this class. You can do this in php as well as in javascript.

Applying CSS to words/letters in html document using jQuery or PHP

2 Answers2