0

我正在尝试编写类似于图像字体生成器的东西，但我无法检查表单值是否为空格，或者给空白图像提供 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>
4

4 回答 4

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;   
}
于 2012-12-20T19:54:17.553 回答
0

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

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

但是，一种更简单的方法是：无需逐个循环遍历所有字符：

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

相同的逻辑适用于像!or之类的字符.，因为它们并不完全适合文件名，请使用对象、数组或开关将它们替换为相应的文件名。
无论如何，输入 like 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也会这样做，但这不是这里的问题。
如果您有兴趣：这里有一些关于使用正则表达式和回调替换的更多信息

于 2012-12-20T19:58:37.697 回答
0

尝试将字母[i]替换为：

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

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

从某种意义上说，这就像将 letters[i] 替换为 myfilename(letters[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”循环可以在那里工作......虽然不想进入所有这些。

于 2012-12-20T19:59:37.027 回答
0

尝试将字符更改为字符代码，并为您要支持的每个代码提供相应的图像文件；您还可以通过 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">将是空间图像。

于 2012-12-20T20:32:41.957 回答