I have some text on a page which I get using a variable:

<p class="category-list-replace">ksadj| lksd| sakdj</p> 
<p class="category-list-replace">sdawfe| nekesa</p> 
<p class="category-list-replace">opeiuf| elnfele</p> 

var list = $('.category-list-replace');

The text is in three different parts, so the variable returns 3 objects. I want to replace any instance of a pipe; "|" with a ma "," instead.

var listnew = list.replace("|", ",");

I'm stuck here though and can't work out how to split the variables so each one can have the character replaced.

I have some text on a page which I get using a variable:

<p class="category-list-replace">ksadj| lksd| sakdj</p> 
<p class="category-list-replace">sdawfe| nekesa</p> 
<p class="category-list-replace">opeiuf| elnfele</p> 

var list = $('.category-list-replace');

The text is in three different parts, so the variable returns 3 objects. I want to replace any instance of a pipe; "|" with a ma "," instead.

var listnew = list.replace("|", ",");

I'm stuck here though and can't work out how to split the variables so each one can have the character replaced.

• javascript
• jquery
• replace

• how about working with them as arrays and deal with each string on iterating – Flash Commented May 16, 2016 at 15:15
• @p.s.w.g I've updated the example with pipes, and I would like to replace the text please – Sam Willis Commented May 16, 2016 at 15:18
• the answer below must do you good i trust – Flash Commented May 16, 2016 at 15:21

3 Answers 3

I'd remend using the text function, for example:

var list = $('.category-list-replace');
list.text(function(i, text) {
    return text.replace(/\|/g, ",")
});

Note this also uses a regular expression (/\|/) with a global flag (g) to replace multiple occurrences of the | character.

$("#go").click(function() {
  var list = $('.category-list-replace');
  list.text(function(i, text) {
    return text.replace(/\|/g, ",")
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="category-list-replace">ksadj| lksd| sakdj</p> 
<p class="category-list-replace">sdawfe| nekesa</p> 
<p class="category-list-replace">opeiuf| elnfele</p>
<button id="go">Replace</go>

Is this something you're looking for?

list.each(function() {
  var $element = $(this);
  var text = $element.text();
  $element.text(text.replace('|', ','));
});

Looks like there's 3 html dom with a class named "category-list-replace"

lists = document.getElementsByClassName("category-list-replace")
var results = [];
for(i = 0; i < lists.length; i++) {
var contents = lists[i].innerHTML;
var texts = contents.split("|");
texts = texts.join(",");
results[i] = texts;
}

check the results array!