Replace characters in HTML elements
<p>I have some text on a page which I get using a variable:</p>

<pre><code>&lt;p class="category-list-replace"&gt;ksadj| lksd| sakdj&lt;/p&gt; 
&lt;p class="category-list-replace"&gt;sdawfe| nekesa&lt;/p&gt; 
&lt;p class="category-list-replace"&gt;opeiuf| elnfele&lt;/p&gt; 

var list = $('.category-list-replace');
</code></pre>

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

<pre><code>var listnew = list.replace("|", ",");
</code></pre>

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