如何使用javascript和jquery重新排列元素中的文本

Question

I am trying to select all the elements with class "name" and when I click on one radio button it flips the last and first name around, so: Hanks, Tom || Tom, Hanks. Here is what I have so far:

HTML:

<h1>Address Book</h1>

<p>Show Names as:</p>
<input name="lastfirst" value="last" type="radio">First, Last
<input name="firstfirst" value="first" type="radio">Last, First
<div>
    <table <thead="">
        <tbody>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td>9001</td>
                <td class="name">Tom Hanks,</td>
                <td>tomhanks@moviestars.com</td>
            </tr>
            <tr>
                <td>9002</td>
                <td class="name">Bruce Willis,</td>
                <td>brucewillis@moviestars.com</td>
            </tr>
            <tr>
                <td>9003</td>
                <td class="name">Jim Carrey,</td>
                <td>jimcarrey@moviestars.com</td>
            </tr>
            <tr>
                <td>9004</td>
                <td class="name">Tom Cruise,</td>
                <td>tomcruise@moviestars.com</td>
            </tr>
            <script>

            </script>
        </tbody>
    </table>
</div>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="./webassets/style.css" media="screen" type="text/css">
    <h1>Company Staff List</h1>

<div>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>9001</td>
                <td>Tom Hanks,</td>
            </tr>
            <tr>
                <td>9002</td>
                <td>Bruce Willis,</td>
            </tr>
            <tr>
                <td>9003</td>
                <td>Jim Carrey,</td>
            </tr>
            <tr>
                <td>9004</td>
                <td>Tom Cruise,</td>
            </tr>
        </tbody>
    </table>
</div>

Here is my jquery. I used a filler of .hide() because other than selecting the elements I am not sure how to do this. Just some hints would help. I am not sure how to separate the first and last name. If I could figure out how to simply swap the first and last name into a variable I could definitely figure out the rest.

$(document).ready(function(){
  $("input[name='lastfirst']").click(function(){
    $(".name").hide();
  });

  $("input[name='firstfirst']").click(function(){
    $(".name").hide();
  });
}); 

Answer 1

DEMO

$(document).ready(function () {
    $("input[name='change_last_first']:nth(0)").prop('checked', true)
    $("input[name='change_last_first']").change(function () {
        $(".name").text(function (_, old_txt) {
            var new_txt = old_txt.split(' ').reverse();
            return new_txt.toString().replace(',,', ' ') + ',';
        });
    });
});

HTML changed

<input name="change_last_first" value="last" type="radio">First, Last
<input name="change_last_first" value="first" type="radio">Last, First

References

.text()

.change()

.replace()

.split()

.toString()

.reverse()

Answer 2

Split it first using. var splStr = input.split(/[ ,]+/);

now concatinate using input=splStr[1]+splStr[0];

Answer 3

you can separate the text using split function input.split(/[ ,]+/); along with a regular expression to separate each "word" within the input. you could then assign each value to a new variable

ex:

var a = array[0], b = array[1]

From there you could concatenate the array values into any order you choose.