CODEWITHSUNDEEP
jquery
william
william

Reputation: 7664

Jquery: Find Text and replace

<div id="id1">
 <p>
   apple
 </p>
 <p>
   ball
 </p>
 <p>
   cat
 </p>
 <p>
   dogsss
 </p>
</div>

How Do I change dogsss to dollsss using jquery?

Upvotes: 56

Views: 341187

Answers (10)

Doug Owings
Doug Owings

Reputation: 4448

You can use .each() to loop through the <p> elements, and .text() to update the text.

For example:

$('#id1 p').each(function() {
    // get element text
    var text = $(this).text();
    // modify text
    text = text.replace('dog', 'doll');
    // update element text
    $(this).text(text); 
});

Demo: https://jsfiddle.net/8gra4xjw/

[Updated to reflect comments]

Note: The above replaces the first occurrence of 'dog' only. To replace all occurrences, you could use:

// modify text (replace all)
text = text.replace(/dog/g, 'doll');

See also: How to replace all occurrences of a string in JavaScript

If the new text must contain HTML entities like &nbsp;, you could use:

// update element text (html)
$(this).html(text);

See also: What is the difference between jQuery: text() and html() ?

Upvotes: 120

Ali Chraghi
Ali Chraghi

Reputation: 829

Try This

$("#id1 p:contains('dogsss')").replaceWith("dollsss");

Upvotes: 0

Sandeep Sherpur
Sandeep Sherpur

Reputation: 2802

Warning string.replace('string','new string') not replaced all character. You have to use regax replace.

For exp: I have a sting old string1, old string2, old string3 and want to replace old to new

Then i used.

    var test = 'old string1, old string2, old string3';

   //***** Wrong method **********
    test = test.replace('old', 'new'); // This  will replaced only first match not all
    Result: new string1, old string2, old string3

  //***** Right method **********
    test = test.replace(/([old])+/g, 'new'); // This  will replaced all match 
    Result: new string1, new string2, new string3

Upvotes: 9

Vishal Thakkar
Vishal Thakkar

Reputation: 61

Change by id or class for each tag

$("#id <tag>:contains('Text want to replaced')").html("Text Want to replaced with");


$(".className <tag>:contains('Text want to replaced')").html("Text Want to replaced with");

Upvotes: 0

Chris
Chris

Reputation: 21

How to change multiple "dogsss" to "dollsss":

$('#id1 p').each(function() {
var text = $(this).text();
// Use global flag i.e. g in the regex to replace all occurrences
$(this).text(text.replace(/dog/g, 'doll'));
});

https://jsfiddle.net/ashjpb9w/

Upvotes: 2

Joanna Avalos
Joanna Avalos

Reputation: 51

I was looking for something similar and I use code that Doug Owings posted, but my text had some br tags and the code was erasing it.

So I use this: ( Just note that I replaced .text() to .html() )

Text:

< p class = "textcontent" > 
     Here some text replace me 
     < br > here an other text
     < br > here is more text 
< /p>

JS:

$('.textcontent').each(function() {

   var text = $(this).html();
   $(this).html(text.replace('replace me', 'I love this text')); 

});

Also if you want to edit several text create an array:

var replacetext = {
    "Text 0": "New Text 0",
    "Text 1": "New Text 1",
    "Text 2": "New Text 2",
    "Text 3": "New Text 3",
    "Text 4": "New Text 4"
};

$.each(replacetext, function(txtorig, txtnew) {
    var text = $('#parentid').html();
    $('#parentid').html(text.replace(txtorig, txtnew)); 
});

Upvotes: 2

Doc Kodam
Doc Kodam

Reputation: 781

More specific:

$("#id1 p:contains('dog')").text($("#id1 p:contains('dog')").text().replace('dog', 'doll'));

Upvotes: 5

Chamika Sandamal
Chamika Sandamal

Reputation: 24302

try this,

$('#id1').html($('#id1').html().replace('dogsss','dollsss'));

working sample

Upvotes: 13

John Hartsock
John Hartsock

Reputation: 86872

$('p:contains("dogsss")').text('dollsss');

Upvotes: 8

Joseph Marikle
Joseph Marikle

Reputation: 78520

$("#id1 p:contains('dog')").html("doll");

that'll do it.

http://jsfiddle.net/pgDFQ/

Upvotes: 33

Related Questions