How do I remove the last comma from my string and replace it with a period in Javascript?

Question

CSS:

    .dynamicDiv {
    width:200px;
    border:solid 1px #c0c0c0;
    background-color:#e1e1e1;
    font-size:11px;
    font-family:verdana;
    color:#000;
    padding:5px;
    }

Javascript:

    //create array
    var myNames=new Array();
    //var nameString=document.getElementById(myNames.toString())

    function addToDiv()
    {
        //1) add name to div
        document.getElementById('divName').innerHTML = document.getElementById('divName').innerHTML + document.getElementById('enter_name').value + "<br>";
        //2) now add the value to an array
        myNames.push(document.getElementById('enter_name').value);
        //strHTML = document.getElementById('divName').innerHTML + document.getElementById('enter_name').value + "<br>";
        //document.getElementById('divName').innerHTML = strHTML;
    }

    function displayMessage()
    {
        //debugger;
        var strMessage = "Welcome to this page ";

        //loop throught the array and add the element values to strMessage
        for(i=0;i<=myNames.length-1;i++)
        {
            strMessage = strMessage + myNames[i] + ", "
        }

        //remove trainling comma
        //strMessage = strMessage

        alert(strMessage);
    }

    function displayMessagebye()
    {
        //debugger;
        var strMessage = "Thank you for coming to this page ";

        //loop throught the array and add the element values to strMessage
        for(i=0;i<=myNames.length-1;i++)
        {
            strMessage = strMessage + myNames[i] + ", "
        }

        //remove trainling comma
        //strMessage = strMes
        //strMessage = strMessage.substr(
        alert(strMessage);
    }

HTML :

<div class="dynamicDiv">
  <input type="text" name="enter_name" id="enter_name" />
  <input name="button" id="button" value="Submit" type="button" onclick="addToDiv();"/>
</div>

<div id="divName" class="dynamicDiv" style="margin:10px 0px;">
<h2>Names List</h2><p>Names of person you've already added.</p>
</div>
<div class="dynamicDiv"><input type="button" onclick="displayMessagebye();" value="Loop" /></div>
<div id="loop" > </div>
<div class="dynamicDiv"><input type="button" onclick="displayMessage();" value="String" /></div>
<div id="string" > </div>

Answer 1

Why not just not put it there in the first place?

ie, in this block:

for(i=0;i<=myNames.length-1;i++)
{
    strMessage = strMessage + myNames[i] + ", "
}

Just check whether we're at the end of the list and put a period there inb place of the comma:

for(i=0;i<=myNames.length-1;i++)
{
    strMessage = strMessage + myNames[i] 
    if(i < myNames.length)
       strMessage += ",";
    else
       strMessage = ".";  
}

Answer 2

Assuming you meant comma, not common, will String.replace(",[^,]+$",".") work?

Note that you can find this same type of functionality in most languages, if you read good documentation.

Answer 3

You can use join to join the array items:

strMessage = myNames.join(", ")

Or even nicer:

if (myNames.length <= 1) {
    strMessage = myNames.join();
} else {
    strMessage = myNames.slice(0, -1).join(", ") + " and " + myNames[myNames.length-1];
}

Answer 4

You could replace the last ", " with "." by:

strMessage.replace(/, $/, ".")