Question

我正在尝试编写类似图像字体生成器的内容，但我无法检查表单值是否为空格，或者是否为空白图像提供了URL。

这是我的代码：

<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>

Answer 1

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;   
}

Answer 2

从你的问题我可以看出，你正在寻找这样的东西：

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');
    }
}

但更简单的方法是这样做，而不必循环遍历所有字符，1：1，这是：

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

或者，如果您愿意，可以一次性替换或删除所有空格：

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

正则表达狂热的方式。假设您有一组特定的字符作为GIF，您可以轻松地使用单个正则表达式将所有这些字符一次性替换为相应的图像：

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"/>';
});

相同的逻辑适用于!或.之类的字符，因为它们不完全适合文件名，使用对象，数组或开关将它们替换为相应的文件名。无论如何，对于像foo bar这样的输入，上面代码的输出应该如下所示：

<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"/>

不确定为什么你的路径是./foo/[].gif，我怀疑foo/[].gif也会这样做，但这不是手头的问题。
如果您有兴趣：here's some more about replacing using regex's and callbacks

Answer 3

尝试替换字母[i] 用：

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

这是一个三元运营商。基本上是一个简写if语句，可以直接用来代替字母[i]

在某种意义上，它就像用myfilename（letters [i]）替换字母[i] myfilename函数在哪里

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

所以你的代码看起来像这样：

<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也像其他人提到的那样，for循环是错误的。我刚刚纠正了这一点。一个“for ... in”循环可以在那里工作......不想进入所有这一切。

Answer 4

尝试将字符更改为字符代码，并为要支持的每个代码提供相应的图像文件;您也可以通过if语句进行范围检查，以确保代码在您接受的范围内。

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;   
}

如果你提供这个功能短语“这是一个测试”，它将导致：

<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">将是空间图像。

检查值是否为空格

4 个答案: