How do I replace part of a string using jQuery then wrap tags round each word of the string

Question

I need to replace any instance of a particular phrase, such as My Phrase with something like <span class="highlight">My</span> <span class="highlight">Phrase</span> using jQuery.

I am ok with small things in jQuery but this one just has me going in circles. I have found some solutions to parts of this online but just cant get things to work together.

Help would be appreciated.

please show us what you have tried - the context will help get the question answered. — Alnitak
– Alnitak, Commented Jan 23, 2012 at 17:01
for example, is the existing text the only contents of a single HTML tag? — Alnitak
– Alnitak, Commented Jan 23, 2012 at 17:03
Are you by chance using this as part of an autocomplete with an ajax call? — Mark Schultheiss
– Mark Schultheiss, Commented Jan 23, 2012 at 17:03
Will the phrase always be text, or can it also contain html tags? If it can contain tags it changes the appropriate solution. — mrtsherman
– mrtsherman, Commented Jan 23, 2012 at 17:04

mrtsherman · Accepted Answer · 2012-01-23 17:08:45Z

1

There are some specifics that are left out of your question, but assuming string is always text only it is simple to split it on a space and wrap it in tags. There is jQuery's wrap which can also accomplish this. I will get you an example of that too. But in this simple case this is a straightforward answer.

http://jsfiddle.net/tBR2r/

var words = $('body').text().split(' ');
var wrappedText = '';
for (var i = 0; i < words.length; i++) {
    wrappedText += '<span>'+words[i]+'</span> ';
}
$('body').html(wrappedText);

answered Jan 23, 2012 at 17:08

mrtsherman

40k23 gold badges90 silver badges111 bronze badges

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

Comments

dougajmcdonald · Accepted Answer · 2012-01-23 17:10:03Z

1

I think you would want to have a look at the jQuery .wrap() function.

This basically lets you encase parts of a jQuery array in an html element of your choosing, have a look here:

http://api.jquery.com/wrap/

You may need some more funk to actually get the works into the format you want, but you could for example do string.split(' ') to break up an array of html into component words, then 'wrap()' the words with your html.

Psuedo code:

var myPhrase = "My Phrase";
$.each(myPhrase.split(' ').slice(0,-1), function(index, item) {
    item.wrap('<span class=\"highlight\"/>');
});

edited Jan 23, 2012 at 17:10

answered Jan 23, 2012 at 17:01

dougajmcdonald

20.2k12 gold badges61 silver badges100 bronze badges

Comments

ShankarSangoli · Accepted Answer · 2012-01-23 17:00:29Z

0

Try this.

var str = "...My Phrase....";

str = str.replace(/My Phrase/g, '<span class="highlight">My</span> <span class="highlight">Phrase</span>');

You can also take a look at this link for your info.

http://www.tizag.com/javascriptT/javascript-string-replace.php

answered Jan 23, 2012 at 17:00

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

1 Comment

Alnitak Over a year ago

My word that's ugly. I rather expect the OP would like something where the phrase to be matched need not be hard coded into the program logic.

Collectives™ on Stack Overflow

How do I replace part of a string using jQuery then wrap tags round each word of the string

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related