Replace function that will replace specific Text to a class

Question

Hi I'm trying to write jQuery replace function that will replace specific text in the HTML to make a class.

I have find jQuery and Html. See this fiddle: http://jsfiddle.net/davidThomas/juTtG/20

It replaces a text character inside the brackets with <b>hello world!</b>

It's good, but I'm trying to replace more different text, like below:

I have Modified jQuery:

// this
var content = $("body").text().replace(/(\[this\])([\s\S]*)(\[\/this\])/gi,'<b>$2</b>');
console.log(content);
$("body").html(content);

// another
var content = $("body").text().replace(/(\[another\])([\s\S]*)(\[\/another\])/gi,'<b>$2</b>');
console.log(content);
$("body").html(content);

// more
var content = $("body").text().replace(/(\[more\])([\s\S]*)(\[\/more\])/gi,'<b>$2</b>');
console.log(content);
$("body").html(content);

Modified HTML:

[this]hello world 1![/this] [another]hello world 2![/another] [more]hello world more![/more]

See modified problem :http://jsfiddle.net/juTtG/384

The problem is it replaces replace one text character inside the <b></b> I'm trying to replace more different text. How to make this modified jQuery and HTML work.

Another matter is, is it possible to replace by this:

<div class="body"> Add a [newclass] </div>

To:

<div class="body">Add a <b class="newclass"></b> </div>

I'm hoping someone could give me a couple suggestions as what to try.

Thanks in advance.

Ted · Accepted Answer · 2015-02-19 15:52:50Z

1

Following your "Modified HTML" problem, see this updated fiddle

Here's the modified script:

$(document).ready(function() {    
    var content = $("body")
        .text()
        .replace(/(\[[\s\S]*?\])/gi, '<b>')
        .replace(/\[\/[\s\S]*?\]/gi, '</b>');
    $("body").html(content);
});

It turns this:

[this]hello world 1![/this] [another]hello world 2![/another] [more]hello world more![/more]

into this:

  <b>hello world 1!<b> <b>hello world 2!<b> <b>hello world more!<b>

For this:

<div class="body"> Add a [newclass] </div>

see this fiddle

Using this script:

$(document).ready(function() {    
    var content = $("body")
        .text()
        .replace(/\[([\s\S]*?)\]/ig, '<b class="$1"></b>');
    $("body").html(content);
});

Makes it this:

<div class="body">Add a <b class="newclass"></b> </div>

HTH,

-Ted

edited Feb 19, 2015 at 15:52

answered Feb 19, 2015 at 15:43

Ted

14.9k2 gold badges43 silver badges58 bronze badges

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

2 Comments

Aariba Over a year ago

Woo nice. But how <div class="body"> Add a [newclass] </div> To: <div class="body">Add a <b class="newclass"></b> </div>

Ted Over a year ago

Added that to the answer :)

Collectives™ on Stack Overflow

Replace function that will replace specific Text to a class

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related