jQuery addClass from regex match

Question

I want to change a block of output from this:

<div>Lorem ipsum dolor sit amet (consectetuer adipiscing elit sed diam nonummy nibh euismod tincidunt)</div>

to this:

<div>Lorem ipsum dolor sit amet <span class="italics">(consectetuer adipiscing elit sed diam nonummy nibh euismod tincidunt)</span></div>

JavaScript:

var div = $('div');
var matches = div.match(/\((.*?)\)/);

if (matches) {
  matches.css('color', 'red');
}

Basically, use regex to wrap everything in (here) with an addClass. Any ideas?

I feel like this is close: http://jsfiddle.net/saltcod/DjHUt/

See this post See if div contains one or more entered words (Javascript) — Dumitru Chirutac
– Dumitru Chirutac, Commented Feb 27, 2013 at 14:58

Ram · Accepted Answer · 2013-02-27 15:10:25Z

1

You can use html method:

$('div').html(function(i, h){
   return h.replace(/\((.*?)\)/, '<span class="italics">$&</span>');
})

http://jsfiddle.net/WmCLz/

edited Feb 27, 2013 at 15:10

answered Feb 27, 2013 at 15:00

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

nhahtdh Over a year ago

Or just use $& and remove the capturing group... You also need g flag just in case

Ram Over a year ago

@nhahtdh Yes, if it should be global, g flag is needed. I just used the OP's regex.

nhahtdh Over a year ago

I don't get why you get -1... I have upvoted your answer, since it is a reasonable answer.

Oscar Jara · Accepted Answer · 2013-02-27 15:09:40Z

0

Try this:

div = $('div');
div.html(div.text().replace(/\([^)]+\)/g, '<span class="italics">$&</span>'));

Live Demo:

http://jsfiddle.net/oscarj24/weJWL/

answered Feb 27, 2013 at 15:09

Oscar Jara

14.2k10 gold badges64 silver badges94 bronze badges

Comments

BahamutWC · Accepted Answer · 2013-02-27 15:29:46Z

0

This should do the job: http://jsfiddle.net/cqTq7/2/

Here is my code:

var div = $('div'),
    divHTML = div.html();
var match = divHTML.match(/\((.*?)\)/);

divHTML = divHTML.replace(match[0], '<span class="italics">$&</span>');

div.html(divHTML);

Note that the match function is a function in JavaScript, not jQuery. Here I also use the JavaScript replace function.

answered Feb 27, 2013 at 15:29

BahamutWC

1942 silver badges8 bronze badges

Collectives™ on Stack Overflow

jQuery addClass from regex match

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related