Replace text after

Question

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...

`br` tags must be closed in your markup. – fardjad Nov 26 '11 at 08:35 — fardjad, Nov 26 '11 at 08:35

score 6 · Accepted Answer · answered Nov 26 '11 at 08:52

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");

@jfriend00 does **.nextAll("br").get(0)** is equal to **.next("br")** ? — khex, Aug 27 '13 at 12:17
@khaljava - no, they don't generate the same results. `.next("br")` only examines the very next sibling and only returns an element if that very next sibling is a `
`. `nextAll("br").get(0)` finds the next sibling that is a `
`. — jfriend00, Aug 27 '13 at 19:42

ipr101 · Answer 2 · 2011-11-26T08:50:27.497

1

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/

edited Nov 26 '11 at 08:50

answered Nov 26 '11 at 08:36

ipr101

24,096
8
59
61

But this will not remove "by Ahmed 1", "by Ahmed 2" and "by Ahmed 3" – Ahmed Atia Nov 26 '11 at 08:38
He want to replace `by Ahmed 1` to `Created by Admin` – Igor Kapkov Nov 26 '11 at 08:38
That's a handy little website, I'll have to remember that one. – Chris Parton Nov 26 '11 at 08:39

score 0 · Answer 3 · answered Nov 26 '11 at 08:38

0

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.

answered Nov 26 '11 at 08:38

Chris Parton

1,052
9
16

fardjad's solution is better than mine, use that :) – Chris Parton Nov 26 '11 at 08:42

Replace text after

3 Answers3