Replace a specific string on an HTML page using JQuery

Question

We are supplying a blob of HTML content to be imported and displayed on someone else's page. The owners of the page put a title around our content blob, but the title is the name of our web service that provides the content, rather than a user-friendly name that we want to display to users. They can't figure out how to change the title on their end, we don't want to change the name of our web service, and it needs to look good for a demo in a few days.

The ideal solution would be for them to figure out how to use their portal tool to be able to customize titles, but that is not likely to happen before the demo. So I was thinking we could include some JavaScript in the content that we send them, which would change the title for them. This would buy them time to figure out what they are doing.

The code for their title looks like this:

<div class="titleClass"> Bad Title </div>

I would like to replace "Bad Title" with "Good Title". I would like to locate this text on the page using a jQuery selector, but unfortunately there are multiple div items with the class of titleClass and I only want to change one of them.... is there a selector I could use that would also check for the text "Bad Title" inside the div tag? Or do I have to write a separate function that would loop through all the different titles on the page, and test each one to see if it contains "Bad Title"? If I have to do the second, does anyone have sample code to share?

karim79 · Accepted Answer · 2009-10-28 14:02:18Z

4

First get a collection of all the elements with matching text:

var $matches = $('div.titleClass').filter(function() {
    return $(this).text() == 'Bad Title';
});

and then replace the text of the matching elements:

$matches.each(function() {
    $(this).text('New Title');
});

The above will look for elements with text exactly matching 'Bad Title'. If you want any element that contains the text 'Bad Title', e.g. 'A Bad Title', you should use indexOf or search, e.g.:

return $(this).text().indexOf('Bad Title') > -1;

One last caveat is case-sensitivity. If you want to do a case-insensitive match, I would suggest something like this:

// the div contains Bad Title of whatever case
return $(this).text().search(/Bad Title/i) > -1;

// the div exactly matches Bad Title of whatever case
return $(this).text().search(/Bad Title/i) > == 0;

edited Oct 28, 2009 at 14:02

answered Oct 28, 2009 at 13:41

karim79

343k67 gold badges420 silver badges409 bronze badges

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

4 Comments

karim79 Over a year ago

@jitter - that depends on whether he wants the title to contain 'Bad Title' or match 'Bad Title'. I assumed the latter.

Spike Williams Over a year ago

I'm actually glad to have both options. Thanks!

karim79 Over a year ago

@jitter - I've re-edited to include your idea plus case-insensitive matching. Hopefully that covers most use cases.

Josh Stodola Over a year ago

jQuery makes people dumb and lazy, I swear. This is what you are doing: First you get all divs with the class of "titleClass". Then you loop through them and remove the ones that don't have the right text. Then you loop through them again and set the text. There is no reason to loop twice here.

matma · Accepted Answer · 2009-10-28 14:48:06Z

1

Maybe You want do it simplier?

$(document).ready( function() {
  $('div.titleClass:contains("Bad Title")').text( "Good title" );
});

Look at the contains selector.

edited Oct 28, 2009 at 14:48

answered Oct 28, 2009 at 14:42

matma

1,0941 gold badge10 silver badges17 bronze badges

1 Comment

karim79 Over a year ago

Won't do for an exact match, unfortunately.

Collectives™ on Stack Overflow

Replace a specific string on an HTML page using JQuery

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related