Replacing a substring of an element's text with another string

Question

The Problem

I'm trying to use the JavaScript string replace method to replace some text in a div if it contains a certain string. However, my code does not replace the string inside that div.

The Javascript

function john(){
  var NAME = "Johnny Buffet,";
  var val = $("div#like-list-").text();
  if ( val.indexOf(NAME) !== -1 ){
      val.replace(NAME, '');      
  }
}

replace is a javascript method and you need to update the text of your element, because right now you're just operating on the variable and not saving the edited string anywhere — omma2289
– omma2289, Commented Aug 12, 2013 at 5:16
@koala_dev: "you're just changing the variable" --- nope, that's incorrect — zerkms
– zerkms, Commented Aug 12, 2013 at 5:16
@Leighton: There is also the manual how to change the text of an element with jQuery: api.jquery.com/text — hakre
– hakre, Commented Aug 12, 2013 at 5:19

Ja͢ck · Accepted Answer · 2013-08-12 05:36:31Z

2

It doesn't work because .replace() is a String function and not a jQuery function; Strings in JavaScript are immutable, so .replac() returns the modified String which you then have to reassign to your element.

That said, you can use .text(fn) to perform the replacement in a single step:

$("div#like-list-").text(function(i, val) {
    return val.replace(NAME, '');
});

Btw, I've removed the .indexOf() condition as well, because if NAME doesn't occur inside your string, the .replace() function will just return the original string.

edited Aug 12, 2013 at 5:36

answered Aug 12, 2013 at 5:19

Ja͢ck

174k39 gold badges269 silver badges317 bronze badges

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

Comments

nbrooks · Accepted Answer · 2013-08-12 05:15:13Z

1

You're editing the string, then simply throwing it away. Take the edited val and put it's contents back into the HTML element using a parameterized call to the text method.

function john(){
  var NAME = "Johnny Buffet,";
  var val = $("div#like-list-").text();
  if ( val.indexOf(NAME) !== -1 ){
      $("div#like-list-").text(val.replace(NAME, ''));
  }
}

answered Aug 12, 2013 at 5:15

nbrooks

18.2k5 gold badges58 silver badges68 bronze badges

1 Comment

nbrooks Over a year ago

@Leighton You're welcome, though @Jack's answer is probably a cleaner approach. If any of these answers solves your problem, remember to mark it as accepted by clicking the check mark next to it.

Zaheer Ahmed · Accepted Answer · 2013-08-12 05:18:23Z

0

replace() is javascript not jQuery and you need to reset the value to variable after replace as replace() returns the updated text; ie;

val = val.replace(NAME, '');

so try:

function john(){
  var NAME = "Johnny Buffet,";
  var val = $("div#like-list-").text();
  if ( val.indexOf(NAME) !== -1 ){
     val = val.replace(NAME, '');      
  }
}

answered Aug 12, 2013 at 5:18

Zaheer Ahmed

28.7k12 gold badges77 silver badges113 bronze badges

Collectives™ on Stack Overflow

Replacing a substring of an element's text with another string

The Problem

The Javascript

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

The Problem

The Javascript

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related