Check if value is a whitespace

Question

I'm trying to write something like an image font generator, but I can not check if the form value is an space, or give an URL to an whitespace image.

Here is my code:

<html><head><title>untitled</title>
<script type="text/javascript">
<!--
function fontgen(text) { 
    var url = './fonts/';
  var letters = text.split('');
  var imgStr = "";
  for (var i in letters) {
    imgStr += '<img src="' +url+letters[i]+ '.gif">';
  }
  document.getElementById('name').innerHTML = imgStr;
  return false;   
}
//-->
</script>
</head>

<body>
<form name="myform" action="">
<input type="text" name="myinput" size="20"><br>
<input type="button" value="Make Font" onclick="return fontgen(document.myform.myinput.value)">
</form>
<div id="name"></div>
</body>
</html>

`for...in` on an array? Don't do that please – Elias Van Ootegem Dec 20 '12 at 19:53 — Elias Van Ootegem, Dec 20 '12 at 19:53

score 2 · Accepted Answer · answered Dec 20 '12 at 19:54

2

function fontgen(text) { 
    var url = './fonts/',
        letters = text.split(''),
        imgStr = "";

    // First, you need a valid for loop:
    for (var i = 0; i < letters.length; i++) {
        if (letters[i] !== ' ') { // then, check to see if it is a space
            imgStr += '<img src="' +url+letters[i]+ '.gif">';
        }
    }
    document.getElementById('name').innerHTML = imgStr;
    return false;   
}

answered Dec 20 '12 at 19:54

Joseph at SwiftOtter

4,276
5
37
55

10x, but i'm trying to replace it with another image – Dec 20 '12 at 20:01
1

@DavidAbgaryan: What do you mean by replacing it with another image? the spaces? in that case: `text.replace(/\s/g,'');` takes care of everything for you. Just replace the letters as you are doing, skipping the spaces or replace all chars with their corresponding images using a regex and a callback function. I'll add an example of the latter to my answer – Elias Van Ootegem Dec 20 '12 at 20:05

score 0 · Answer 2 · edited May 23 '17 at 12:13

From what I can tell from your question, you're looking for something like this:

for (var i=0;i<text.length;i++)
{
    if (text.charAt(i) !== ' ')
    {//using charAt, you're supporting all browsers, without having to split the string
        console.log(text.charAt(i) + ' is not space');
    }
}

But an easier way of doing this, without having to loop through all chars, 1 by 1, is this:

if (text.indexOf(' ') === -1)
{
    console.log('No spaces in ' + text + ' found');
}

Or, if you want to, you can replace or remove all spaces in one go:

text = text.replace(/\s/g,'_');//replaces spaces with underscores
text = text.replace(/\s/g, '');//removes spaces

Regex-mania way. Suppose you have a certain set of chars as gifs, you can easily use a single regex to replace all of those chars with their corresponding images in one fell swoop:

var imgString = text.replace(/([a-z0-9\s])/gi, function(char)
{
    if (char === ' ')
    {
        char = 'space';//name of space img
    }
    return '<img src="'url + char + '.gif"/>';
});

Same logic applies to chars like ! or ., since they're not exactly suitable for file names, use an object, array or switch to replace them with their corresponding file-names.
Anyway, with input like foo bar, the output of the code above should look something like this:

<img src="./fonts/f.gif"/><img src="./fonts/o.gif"/><img src="./fonts/o.gif"/><img src="./fonts/space.gif"/><img src="./fonts/b.gif"/><img src="./fonts/a.gif"/><img src="./fonts/r.gif"/>

Not sure why your path is ./foo/[].gif, I suspect foo/[].gif would do just as well, but that's not the issue at hand here.
In case you're interested: here's some more about replacing using regex's and callbacks

score 0 · Answer 3 · edited Dec 20 '12 at 20:15

try replacing letters[i] with:

(letters[i] == " ") ? "spacefilename" : letters[i]

this is a ternary operator. basically a shorthand if statement that can be used directly in place of letters[i]

in a sense it would be like replacing letters[i] with myfilename(letters[i]) where the myfilename function is

function myfilename(char)
{
  if (char == " ") {
    return "space";
  } else {
    return char;
  }
}

so your code would look like this:

<html><head><title>untitled</title>
<script type="text/javascript">
<!--
function fontgen(text) { 
    var url = './fonts/';
  var letters = text.split('');
  var imgStr = "";
  for (var i = 0; i < letters.length; i++) {
    imgStr += '<img src="' +url+(letters[i] == " ") ? "spacefilename" : letters[i]+ '.gif">';
  }
  document.getElementById('name').innerHTML = imgStr;
  return false;   
}
//-->
</script>
</head>

<body>
<form name="myform" action="">
<input type="text" name="myinput" size="20"><br>
<input type="button" value="Make Font" onclick="return fontgen(document.myform.myinput.value)">
</form>
<div id="name"></div>
</body>
</html>

/e also as someone else mentioned, the for loop is wrong. i corrected that just now. a "for...in" loop could work there... don't want to get into all that though.

@DavidAbgaryan: typo in the code `for (var i = 0; i < letter[i].length; i++) {` should be `for (var i = 0; i < letters.length; i++) {` — Elias Van Ootegem, Dec 20 '12 at 20:14
thank you Elias, that was silly of me... long day. David try it now, Elias fixed the code — Michael, Dec 20 '12 at 20:16

score 0 · Answer 4 · answered Dec 20 '12 at 20:32

Try changing the character into a char code and having a corresponding image file for each code you want to support; you can also put a range check via if statement to make sure the codes fall within your accepted ranges.

function fontgen(text)
{ 
  var imgStr = "";
  for (var i = 0; i < text.length; i++)
    imgStr += '<img src="./fonts/' + text[i].charCodeAt(0) + '.gif">';

  document.getElementById('name').innerHTML = imgStr;

  return false;   
}

If you supply this function the phrase "this is a test" it will result in:

<div id="name">
    <img src="./fonts/116.gif">
    <img src="./fonts/104.gif">
    <img src="./fonts/105.gif">
    <img src="./fonts/115.gif">
    <img src="./fonts/32.gif">
    <img src="./fonts/105.gif">
    <img src="./fonts/115.gif">
    <img src="./fonts/32.gif">
    <img src="./fonts/97.gif">
    <img src="./fonts/32.gif">
    <img src="./fonts/116.gif">
    <img src="./fonts/101.gif">
    <img src="./fonts/115.gif">
    <img src="./fonts/116.gif">
</div>

<img src="./fonts/32.gif"> would be the space image.

Check if value is a whitespace

4 Answers4