CODEWITHSUNDEEP
javascriptjquery
Jenny
Jenny

Reputation: 919

How to change just the text after the bold tag?

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/

Upvotes: 0

Views: 1110

Answers (6)

Ja͢ck
Ja͢ck

Reputation: 173642

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

Upvotes: 0

Rahul Vaghela
Rahul Vaghela

Reputation: 211

<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; }

Upvotes: 0

Rahul Vaghela
Rahul Vaghela

Reputation: 211

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; 
}

Upvotes: -1

Nicolas
Nicolas

Reputation: 1143

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

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337656

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

Upvotes: 0

j08691
j08691

Reputation: 207973

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

Upvotes: 2

Related Questions