Question

我的任务是创建一个使用while循环的函数，该函数将句子中的所有e转换为3，将所有a转换为4。“ Hacker Speak”。现在，我的功能使浏览器陷入无限循环。我不知道我在做什么错。

scm

function hackerSpeak() {
  var sentence2 = document.getElementById('sentence2').value;
  var milk = false;
  var counting = 0;
  while (!milk) {
    if (counting == sentence2.value) {
      milk = true;
    } else if (sentence2.charCodeAt(counting) == "e") {
      sentence2.replace(counting, "3")
      counting++;
    } else if (sentence2.charCodeAt(counting) == "a") {
      sentence2.replace(counting, "4")
      counting++;
    } else {
      counting++;
    }
  }
  document.getElementById('replaceThree').innerHTML = sentence2;
}

Answer 1

您使它变得太复杂了。 JavaScript中的replace方法不将索引作为参数，但具有以下参数：string.replace(searchvalue, newvalue)。

并且不需要使用循环来执行您要执行的操作。

您正在尝试通过在替换方法不支持的字符串中传递字符的索引来使用替换。

无需循环的简单解决方案

相反，为了满足您的要求，您应该使用以下脚本。

 Function 3: Hack speak<br>
    <textarea id="sentence2" class="try"></textarea><br>
    <button onclick="hackerSpeak()">Convert!</button>
    <div id="replaceThree"></div>


 <script>
 function hackerSpeak(){
  var sentence2 = document.getElementById('sentence2').value;
  document.getElementById('replaceThree').innerHTML = sentence2.replace("a","4").replace("e","3");
 }
 </script>

使用while循环的另一种解决方案

如果仍然需要使用循环，则将代码修改为以下内容。可以在running demo

上查看演示

请注意，使用循环方法必须从原始句子的第一个字符开始逐个字符地重建句子字符。变量newSentence将使用您拥有的业务规则一次构造一个字符。将每个字符添加到newSentence值时，此方法使用字符串连接。

Function 3: Hack speak<br>
    <textarea id="sentence2" class="try"></textarea><br>
    <button onclick="hackerSpeak()">Convert!</button>
    <div id="replaceThree"></div>



 <script>
 function hackerSpeak(){
  var sentence2 = document.getElementById('sentence2').value.trim();
  var milk = false;
  var counting = 0;
  var newSentence = "";
  while(milk === false){
  if(sentence2.length == 0 || counting > (sentence2.length -1)){
     milk = true;
  }
  else if(sentence2.charAt(counting)==="e"){
     newSentence =  newSentence + "3";// sentence2.replace(counting, "3")
     counting++;
  }
  else if(sentence2.charAt(counting)==="a"){
     newSentence =  newSentence + "4";//sentence2.replace(counting, "4")
     counting++;
  }
  else{
    newSentence = newSentence + sentence2.charAt(counting);
    counting++;
   }
  }//end of while loop
  document.getElementById('replaceThree').innerHTML = newSentence;
}
</script>

Answer 2

我能看到的唯一问题是退出while循环。代替使用句子2.value的方法，可以将其与句子.length

进行比较

尝试以下代码退出

if(counting==sentence2.length){
     milk = true;
  }

即使在替换功能中，它也无法与索引一起使用，您可以使用

if (sentence2.charCodeAt(counting) == "e") {
      sentence2.replace("e", "3")
      counting++;
    } else if (sentence2.charCodeAt(counting) == "a") {
      sentence2.replace("a", "4")
      counting++;
    } else {
      counting++;
    }

一旦计数器更新，它将匹配句子2的长度并退出循环。

Answer 3

随着新替换的出现，代码将变得越来越庞大和笨拙。

// array of characters to replace and their replacments - 
// easier to extend the array to include new values without 
// forcing code become more aware 
var hackerSwaps = [
    ['a', 'e', 'o'],    // n00bspeak
    ['4', '3', '0']     // 1337sp34k
];

// args to function are id properties of sentence and output target
 function hackerSpeak(sId, outId) {
    // convenience reference 
    function get(eId) {return document.getElementById(eId);};

    // split sentence into character array
    var s = get(sId).value.split('');
    // for each pair of items in the character swapping array
    for (var j = 0; j < hackerSwaps[0].length; j++) {
        var c = hackerSwaps[0][j];  // get n00b char
        var h = hackerSwaps[1][j];  // get 1337 replacement
        // for each character in sentence
        for (var i = 0; i < s.length; i++) {
            if (s[i] == c) s[i] = h;
        }
    }
      // convert back to String and write to page
      get(outId).innerHTML = s.join('');
};

对于HTML ...

    <form>
            <textarea id="sentence2" class="try">some content with 'a' and 'e' characters</textarea><br>
            <input type="button" onclick="hackerSpeak('sentence2', 'replaceThree');" value="Convert!" />
            <div id="replaceThree">nothing</div>
    </form>
    <p id="replaceThree"></p>

我的作业中出现无限循环错误；不知道如何解决

3 个答案: