How to replace text with Jquery?

Question

Is it possible I can replace my name with "anonymous" via jquery. but still keep my anchor tag with the specific link to a comment. I couldn't figure it out so I tried removing the text and keeping the comment with

$('div.entryFooter').replaceWith($('div.entryFooter a')); 

but it showed all the content from all three 'a' elements in all of my divs.

Ideally, I just need the name replaced with "anonymous". My name will always be different so I need a way to find the name after "Posted by"

<div class="entryFooter">Posted by mjroodt at 24/10/2011 11:48<a href="/BlogPage.aspxid=20396&blogid=58906">Comments (1)</a></div>

<div class="entryFooter">Posted by mjroodt at 27/10/2011 13:33<a href="/BlogPage.aspx?id=12396&blogid=58945">Comments (2)</a></div>

<div class="entryFooter">Posted by mjroodt at 27/10/2011 15:59<a href="/BlogPage.aspx?id=14396&blogid=59963">Comments (7)</a></div>

Many thanks

Answer 1

This loop will parse out the name, whatever it might be, and replace it with in this case anon:

$('div').each(function () {
   var $this = $(this),
    text = $this.text(),
    name = text.match(/Posted by (.+) at .+/)[1]
   $this.text(text.replace(name, 'anon')) 
});

Example

Using:

• jQuery.each
• String.replace
• jQuery.text
• String.match

Answer 2

I'd suggest you to wrap text into span and iterate through them to change text() with RegExp:

see the work example for you requirements: http://jsfiddle.net/mikhailov/ypRsP/

HTML

<div class="entryFooter">
    <span>Posted by mjroodt at 24/10/2011 11:48</span>
    <a href="/BlogPage.aspxid=20396&blogid=58906">Comments (1)</a>
</div>

<div class="entryFooter">
    <span>Posted by mjroodt at 27/10/2011 13:33</span>
    <a href="/BlogPage.aspx?id=12396&blogid=58945">Comments (2)</a>
</div>

<div class="entryFooter">
    <span>Posted by mjroodt at 27/10/2011 15:59</span>
    <a href="/BlogPage.aspx?id=14396&blogid=59963">Comments (7)</a>
</div>

JS

$('.entryFooter span').each(function(){
    var that    = $(this);
    var content = that.text();
    var t = content.replace(/^Posted by [A-Za-z]+/, "Posted by Anonymous");
    that.text(t);
});

Answer 3

No need for jQuery here. Just use the Javascript replace([substring], [newstring]) function:

var value = $(".div.entryFooter").text().replace("James Johnson", "Anonymous");

Should be noted that this is only for the visual display. If you don't want the names to show at all, you'll need to parse them out at the server or database level.

$(".div.entryFooter").each(function(){
    $(this).text($(this).text().replace("James Johnson", "Anonymous"));
});

Answer 4

If you want to hide your real name, you have to adjust the server response.
For visual changes only, use the code below:

var name = "mjroodt";
var replaceBy = "anonymous";

//Generate a replace-all pattern
var pattern = new RegExp(name.replace(/([[^$.|?*+(){}])/g, '\\$1'), 'g');

//Loop through each `div.entryFooter` element
$("div.entryFooter").each(function(){
    var $this = $(this);
    var text = $this.text();
    //Check if the name exists. Otherwise, ignore
    if(text.indexOf(name) == -1) return;
    $this.text(text.replace(pattern, replaceBy));
})

Answer 5

You could match any name and replace it with "anonymous" using the below code,

text.replace(/by[ ][a-zA-Z0-9]*[ ]at/,"by anonymous at");

The above would replace the content between "by" and "at" in the sentence "posted by xyz at" by "posted by anonymous at".

Answer 6

You can do this by using a few lines of Jquery below. This solution will keep your anchor tags working as they were and you don't need to know the name you are trying to replace.

$('.entryFooter').each(function(){
    var html_arr = $(this).html().split(' ');
    html_arr[2] = 'anonymous';
    $(this).html(html_arr.join(' '));
});

EXAMPLE