How to change just the text after the bold tag?

Question

I am having difficulty changing both instances of "a Runner" to "a Team Captain"

<form id="thisForm">
    <table>
        <tr bgcolor="#eeeeee">
            <td valign="top" colspan="4" style="vertical-align: top;">
                <input type="radio" onclick="javascript:teamAction('form')" value="none" name="teamAct">
                &nbsp;<b>Become</b> a Runner
            </td>
        </tr>
        <tr bgcolor="#eeeeee">
            <td valign="top" colspan="4" style="vertical-align: top;">
                <input type="radio" onclick="javascript:teamAction('form')" value="none" name="teamAct">
                &nbsp;<b>Support</b> a Runner
            </td>
        </tr>
    </table>
</form>

I was able to change the first instance using:

document.getElementById("thisForm").innerHTML = document.getElementById("thisForm").innerHTML.replace(" a Runner", " a Team Captain");

Please see jsfiddle: http://jsfiddle.net/jelane20/voxnmwpn/

You tagged your question with jquery but you don't have any jquery in the posted code. Are you expecting an answer with jquery or without? — Huangism, Aug 13 '14 at 13:40
[Related question](http://stackoverflow.com/questions/13816944/replace-text-inside-td-using-jquery/13817512). — Ja͢ck, Aug 13 '14 at 13:47

score 2 · Accepted Answer · answered Aug 13 '14 at 13:41

2

Use the global switch (replace(/ a Runner/g," a Team Captain")) with your replace:

document.getElementById("thisForm").innerHTML=document.getElementById("thisForm").innerHTML.replace(/ a Runner/g," a Team Captain");

jsFiddle example

answered Aug 13 '14 at 13:41

j08691

204,283
31
260
272

This works, but what if there is other text within that form that says a Runner that I do not want to be changed. I only want it changed for these 2 rows. Is that possible? – Jenny Aug 13 '14 at 14:45
I'm not aware of a solution where you wouldn't need a loop to do that. – j08691 Aug 13 '14 at 14:51
@Jenny My [answer](http://stackoverflow.com/a/25287817/1338292) touches on that subject and since you've tagged the question as jQuery I think it was worth mentioning :) – Ja͢ck Aug 15 '14 at 05:48

score 0 · Answer 2 · answered Aug 13 '14 at 13:42

Your code is only replacing the first occurence. You could convert it to a regex and use the global match g parameter:

document.getElementById("thisForm").innerHTML = document.getElementById("thisForm").innerHTML.replace(/a Runner/g, " a Team Captain");

Updated fiddle

If you would like a jQuery implementation, you could avoid munging the HTML of the whole table by changing the textNodes directly. Try this:

$('#thisForm td').each(function() {
    var contents = $(this).contents().filter(function() {
        return this.nodeType == 3;
    });
    contents[contents.length -1].nodeValue = " a Team Captain";
});

Example fiddle

Ja͢ck · Answer 3 · 2014-08-15T05:46:29.897

0

Just change the search pattern into a regular expression object with a global (/g) flag:

$('#thisForm').html(function(i, html) {
    return html.replace(/a Runner/g," a Team Captain");
});

Demo

This can also easily be extended to operate on each row, allowing for filters to be applied first:

$('#thisForm tr').html(function(i, html) {
    return html.replace(/a Runner/g," a Team Captain");
});

edited Aug 15 '14 at 05:46

answered Aug 13 '14 at 13:42

Ja͢ck

170,779
38
263
309

score 0 · Answer 4 · answered Aug 13 '14 at 13:44

While j08691's answer is the better option, here is an alternative. The below code will use jQuery to loop through your "Runner" text and change it to Team Captain. By using a class we can loop through all instances of an element with the name title.

&nbsp;<b>Become</b> a <div class="title">Runner</div>

$(".title").each(function () {
    $(this).html("Team Captain");
});

score 0 · Answer 5 · answered Aug 13 '14 at 14:22

<p id="demo"><input type="radio" value="none" onclick="myFunction()" name="teamAct"><b>Become</b> a Runner</p>

function myFunction() { var str = document.getElementById("demo").innerHTML; var res = str.replace("a Runner", "a Team Captain"); document.getElementById("demo").innerHTML = res; }

score -1 · Answer 6 · edited Aug 13 '14 at 14:17

-1

Try this instead

function myFunction() { 
    var str = document.getElementById("demo").innerHTML; 
    var res = str.replace("a Runner", "a Team Captain"); 
    document.getElementById("demo").innerHTML = res; 
}

edited Aug 13 '14 at 14:17

twoleggedhorse

4,938
4
23
38

answered Aug 13 '14 at 14:12

Rahul Vaghela

171
2
9

How to change just the text after the bold tag?

6 Answers6