CODEWITHSUNDEEP
jqueryhtmlreplace
Ahmed Atia
Ahmed Atia

Reputation: 17960

Replace text after <br>

I have the following html format

<tr>
    <td width="80%" style="padding-bottom: 3px" class="ms-vb">
        <span class="ms-announcementtitle">
            title is here 1
        </span>
        <br>
        by Ahmed 1
    </td>
</tr>
<tr>
    <td width="80%" style="padding-bottom: 3px" class="ms-vb">
        <span class="ms-announcementtitle">
            title is here 2
        </span>
        <br>
        by Ahmed 2
    </td>
</tr>
<tr>
    <td width="80%" style="padding-bottom: 3px" class="ms-vb">
        <span class="ms-announcementtitle">
            title is here 3
        </span>
        <br>
        by Ahmed 3
    </td>
</tr>

I want to replace text after <br> to be "Created By Admin" i.e. by Ahmed 1 --> Created by Admin and so on...

Upvotes: 1

Views: 2388

Answers (3)

jfriend00
jfriend00

Reputation: 707318

Rather than manipulate the HTML of parent objects and cause much of the table to get reparsed, you can find and replace that text directly with this code that is a combination of jQuery and plain javascript:

$(".ms-announcementtitle").each(function() {
    $(this).nextAll("br").get(0).nextSibling.nodeValue = "Created By Admin";
});

This finds the spans with class="ms-announcementtitle", then finds the <br> tag following it, then gets the DOM node for that and gets the nextSibling which will be the text node and finally changes it's text directly.

You can see it work here: http://jsfiddle.net/jfriend00/z5zVT/.

jQuery doesn't have many functions for dealing with text nodes and because the text you want to replace is not wrapped in it's own container, it's best to find the area with jQuery and then use a plain javascript operation to deal with the text node directly rather than modifying the innerHTML of a higher level container which causes everything in the container to be reparsed.

If you control the HTML for this, it would be best to wrap the desired text in a <span class="creator"> and then you can target the contents of just that span in a much more direct way with something like this:

 $(".creator").text("Created by Admin");

Upvotes: 6

ipr101
ipr101

Reputation: 24236

Using the HTML in your example, this would work -

$("table tr > td").contents()
  .filter(function() {
    return this.nodeType == 3; //Node.TEXT_NODE
  }).remove();

$("table tr > td").append("Created by Admin")

This will replace any text as long as it appears where 'by Ahmed n' appears.

Demo - http://jsfiddle.net/6J69V/1/

Upvotes: 1

Chris Parton
Chris Parton

Reputation: 1054

You should really specify what tool you wish to use to replace the text. By looking at the tags, I assume you want to use JQuery.

Is it possible for you to wrap the text you wish to change inside a tag? If so, this may help: http://www.webdeveloper.com/forum/showthread.php?t=84892. The suggestions there use plain old Javascript instead of JQuery, but I don't see why that would be a problem.

Upvotes: 0

Related Questions