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

文字[i]を次のように置き換えてみてください：

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

これは三項演算子です。基本的に、文字 [i] の代わりに直接使用できる省略形の if ステートメント

ある意味では、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

あなたの質問からわかることから、あなたは次のようなものを探しています：

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 つずつループすることなく、これを行う簡単な方法は次のとおりです。

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が、同様にうまくいくと思いますが、それはここでの問題ではありません。
興味がある場合:正規表現とコールバックを使用した置換について、さらに詳しく説明します。

于 2012-12-20T19:58:37.697 に答える