Question

我是JavaScript的初学者，使用免费的pdf书籍，google和Stackoverflow的自学者。我陷入了一个自我分配的任务......

用数字交换单词，从一个文本框中取值，执行交换并将结果放入另一个文本框中。例如，当我键入6个svn zro时，输出必须是670

但是当我在textBox1中输入内容时，textbox2中的结果为＆＃34;未定义＆＃34; **

请仅使用简单的JavaScript调试它，而不是jQuery。

这是我的代码......

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function myFunction()
 {
    var a = ["one","two","tri","for","fiv","six","svn","egt","nin","zro"];
    var b = [1,2,3,4,5,6,7,8,9,0];
    var str = document.getElementById("textBox1").value;
    var x = document.getElementById("textBox2").value;
    var len = str.length;  

       for (var k=0; k < 200; k++)  
          {
            var n = str.search(new RegExp(a[k], "i"));
            var str1 = str.substring(0, n) + b[k] + str.substring(n+3, len);
            document.getElementById('textBox2').value = str1.toString();
          };
 }
</script>
</head>
<body>
<input type="text"  onkeyup="myFunction();" id="textBox1" autofocus/>
<br><br><br><br><br><br>
<input type="text"   id="textBox2" /> 
</body>
</html>

Answer 1

您获得undefined的原因仍然是for循环。

当k到达10时，a[10]不存在，因此返回undefined。这将被用作字符串中的替换值。

如果将k限制为数组a的长度，则不会得到未定义的值。

另一个问题是您始终从原始字符串开始，因此忽略先前的替换。您需要始终使用str而不是str1。

最后，使用replace()函数而不是使用子字符串更简单 - 我尝试重用你的子字符串代码但却无法使其工作。

所以你的功能可以变成：

＆＃13;

function myFunction() {
    // values to search for - these can be strings or a regex string
    var a = ["zro", "one", "two", "tri", "for", "fiv", "six", "svn", "egt", "nin"];

    // get the input value
    // we will perform all replacements against this
    var str = document.getElementById("textBox1").value;

    // loop through the array and replace each value in "str" with its index
    // note we are reusing "str" each time to keep the previous replacements intact
    // replace() can take either a string or a regex
    for (var k = 0; k < a.length; k++) {
        // put "zro" at the start of "a" so "k" is now the same as b[k] - no need for "b"
        // create a RegExp from the string, set it to global replace (g) so it works if there is more than one match in the string, and case insensitive (i) in case they type "One"
        str = str.replace(new RegExp(a[k], "gi"), k);
    };

    // store final value in the other textbox
    document.getElementById('textBox2').value = str;
}

＆＃13;

<input type="text" onkeyup="myFunction();" id="textBox1" autofocus="autofocus" />
<br/>
<input type="text" id="textBox2" />

＆＃13;

编辑/脚注：replace()仍然比较简单，但可以使用substring() - 原始代码的问题是如果正则表达式与任何内容都不匹配，n将为-1并且混乱str。因此，在执行子字符串部分之前，您需要检查n > -1：

for (var k = 0; k < a.length; k++) {
    var n = str.search(new RegExp(a[k], "i"));
    if(n > -1) {
        // n+a[k].length is better than n+3, in case a[k] isn't 3 chars!
        str = str.substring(0, n) + k + str.substring(n+a[k].length, str.length);
    }
};

Answer 2

这是我的建议

function myFunction() {
  var a = ["zro","one","two","tri","for","fiv","six","svn","egt","nin"]; // 0-based 
  var str = document.getElementById("textBox1").value; 
  var words = str.split(" "),len=words.length, str1=""; // split on words
  for (var i=0; i < len; i++) { // run over length of array
    var idx = a.indexOf(words[i]); // find the word in the index array
    if (idx !=-1) str1+=idx;
  }
  if (str1) document.getElementById('textBox2').value=str1;
}

<input type="text" onkeyup="myFunction();" id="textBox1" autofocus/>
<br><br><br><br><br><br>
<input type="text"   id="textBox2" />

如果你想要任何包含任何a []字符串的条目，那么这样做

function myFunction1() {
  var str = document.getElementById("textBox1").value; 
  var a = ["zro","one","two","tri","for","fiv","six","svn","egt","nin"];
  var len = a.length;
  for (var i=0; i < len; i++) {
    var idx = str.indexOf(a[i]); // or str.toUpperCase().indexOf(a[i].toUpperCase()) 
    if (idx !=-1) str = str.split(a[i]).join(i); // or use substr if case insensitive
  }
  if (str) document.getElementById('textBox2').value=str;
 }

用数字交换字母，使用javascript搜索

2 个答案: