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:
Is there a less-bulky (e.g. multiple if elses) method for stripping away additional spaces?
-
\$\begingroup\$ If my current answer doesn't suffice then could you please elaborate further on what you're after, I might've misunderstood you. \$\endgroup\$Ben A. Noone– Ben A. Noone2014年06月11日 16:42:31 +00:00Commented Jun 11, 2014 at 16:42
2 Answers 2
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.
-
\$\begingroup\$ Note that
String.prototype.trimisn't available in older browsers. However, jQuery has its own browser-independent$.trim()function you can use instead \$\endgroup\$Flambino– Flambino2014年06月11日 00:30:38 +00:00Commented Jun 11, 2014 at 0:30 -
\$\begingroup\$ Why
value.trimLeft().trimRight()instead of justvalue.trim()? \$\endgroup\$Dagg– Dagg2014年06月11日 15:21:12 +00:00Commented Jun 11, 2014 at 15:21 -
\$\begingroup\$ @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. \$\endgroup\$Ben A. Noone– Ben A. Noone2014年06月11日 15:33:22 +00:00Commented Jun 11, 2014 at 15:33
-
\$\begingroup\$ Probably also worth noting that
trimLeftandtrimRightare non-standard (buttrimis in ES5). \$\endgroup\$Dagg– Dagg2014年06月11日 15:55:59 +00:00Commented Jun 11, 2014 at 15:55 -
\$\begingroup\$ Noted (see edit;) \$\endgroup\$Ben A. Noone– Ben A. Noone2014年06月11日 16:01:33 +00:00Commented Jun 11, 2014 at 16:01
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.');}
}