current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top
up vote 4 down vote favorite

I want to take user input strings and add them together with proper spacing.

HTML:

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>

<body>
<input id="input" type="text" placeholder="Words Go Here"></input>
<button id="addWords">Add Words</button>
<div id="output"></div>
</body>

JavaScript:

(function () {

 $('#addWords').on('click', addWords);

 function addWords() {

    var value = $('#input').val();
    var firstChar = value.charAt(0);
    var lastChar = value.slice(-1);

     if ((/^[a-zA-Z\s]*$/.test(value)) && (value !== '')) {

         if (firstChar == ' ' && lastChar == ' ') {

            value = value.trimLeft().trimRight();

         } else if (firstChar == ' ') {

            value = value.trimLeft();

         } else if (lastChar == ' ') {

            value = value.trimRight();

         } else {

            value = value;
        }

        $('#output').append($('<span></span>').text(value + ' '));

     } else {

        alert('Please use characters only.');

     }
 }

})();

Example:

JSFiddle

Is there a less-bulky (e.g. multiple if elses) method for stripping away additional spaces?

share|improve this question
    
If my current answer doesn't suffice then could you please elaborate further on what you're after, I might've misunderstood you. – Ben A. Noone Jun 11 '14 at 16:42
up vote 4 down vote accepted

If I'm not misunderstanding the intent of your script you don't need the if elses at all.

For starters not having a space to trim when calling trim(Right or Left) is not a problem. No errors are thrown. So you could just do this:

function addWords() {
    var value = $('#input').val();

    if ((/^[a-zA-Z\s]*$/.test(value)) && (value !== '')) {
        value = value.trimLeft().trimRight();
        $('#output').append($('<span></span>').text(value + ' '));
    } else {
        alert('Please use characters only.');
    }
}

For simplicities sake instead of value.trimLeft().trimRight() you can just use value.trim().

Edit: Also as Dagg pointed out(see comments below) String.prototype.trimLeft() and String.prototype.trimRight() are non-standard but String.prototype.trim() is in the spec's for ES5.

share|improve this answer
    
Note that String.prototype.trim isn't available in older browsers. However, jQuery has its own browser-independent $.trim() function you can use instead – Flambino Jun 11 '14 at 0:30
    
Why value.trimLeft().trimRight() instead of just value.trim()? – Dagg Jun 11 '14 at 15:21
    
@Dagg Mostly to prove the point that trim functions don't have to have something to remove. But you are right. Edited to include trim() as option. – Ben A. Noone Jun 11 '14 at 15:33
    
Probably also worth noting that trimLeft and trimRight are non-standard (but trim is in ES5). – Dagg Jun 11 '14 at 15:55
    
Noted (see edit;) – Ben A. Noone Jun 11 '14 at 16:01
up vote 0 down vote

It can also be made even more compact, using the regexp to check both for letters only and for not empty word, so firing an exception when the latter happens.
It also uses jQuery trim(), as rightly recommended by @Flambino.

function addWords() {
  try {
    $('<span>' + $.trim($('#input')).match(/^\w+$/)[0] + ' </span>').appendTo($('#output'));
  }
  catch (e) {alert('Please use characters only.');}
}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.