Javascript-用char显示单词一个字母+一个字母等等答案

【问题标题】：Javascript- displaying words with charAt one letter+one letter and so onJavascript-用char显示单词一个字母+一个字母等等
【发布时间】：2016-11-30 15:15:04
【问题描述】：

所以我试图显示在我的文本框中输入的单词，如下例所示：(thomas) 将显示为 = "t, th, tho, thom, thoma, thomas"。我在 charAt 中输入什么来实现这一点？还是我需要添加其他东西？提前致谢！

<head>
  <meta charset="utf-8">

 <script>

    function printit()
    {
     var temptext = document.getElementById("mytext").value;   
     var tempa = temptext.charAt();
     document.getElementById("translated").innerHTML=tempa;

    }

 </script>


 </head>


 <body>
   <h1> </h1> 

<form name="f1">
 <input type="text" id="mytext" value="" />
 <input type="button"  value="print" onclick="printit()"/>

 </form>
 <div id="translated"  style="background-color:gray"></div> 

</body>


</html>

【问题讨论】：

substring 在loop 中会更简单。

标签： javascript charat

【解决方案1】：

使用 Array.from 和 String#slice 方法的 ES6 解决方案。

<script>
  function printit() {
    var temptext = document.getElementById("mytext").value;
    document.getElementById("translated").innerHTML = Array.from({
      length: temptext.length
    }, (v, i) => temptext.slice(0, i + 1)).join();

  }
</script>


<form name="f1">
  <input type="text" id="mytext" value="" />
  <input type="button" value="print" onclick="printit()" />

</form>
<div id="translated" style="background-color:gray"></div>

使用Array#map 和String#split 方法。

<script>
  function printit() {
    var temptext = document.getElementById("mytext").value;
    document.getElementById("translated").innerHTML = temptext.split('').map(function(v, i) {
      return temptext.slice(0, i + 1)
    }).join();

  }
</script>


<form name="f1">
  <input type="text" id="mytext" value="" />
  <input type="button" value="print" onclick="printit()" />

</form>
<div id="translated" style="background-color:gray"></div>

【讨论】：

【解决方案2】：

一个更简单的解决方案：

function writemore(){
    var a = document.getElementById("mytext").value;
    var out = [];
    for(var i=1;i<a.length+1;i++){
       out.push(a.substring(0,i));
    }
    document.getElementById("translated").innerHTML = out.join(',');
};

<form name="f1">
  <input type="text" id="mytext" value="" />
  <input type="button" value="print" onclick="writemore();" />

</form>
<div id="translated" style="background-color:gray"></div>

【讨论】：

【解决方案3】：

您可以使用Array.prototype.map 和String.prototype.slice 来生成预期结果。

function printit(){
  var text = document.getElementById('mytext').value;
  document.getElementById("translated").innerHTML = text.split('').map(function(v, i){ return text.slice(0, i + 1)}).join(', ');
}

<h1> </h1> 

<form name="f1">
  <input type="text" id="mytext" value="" />
  <input type="button" value="print" onclick="printit()" />

</form>
<div id="translated" style="background-color:gray"></div>

【讨论】：

【解决方案4】：

If you want to display "t, th, tho, thom, thoma, thomas" you should to store your position of charAt(position+1) and make for condition.., so :

t : 0==> display  = display  + ", "+ charAt(position+1)
th : 1==> display  = display  + ", "+ charAt(position+1)
tho: 2 ==> display  = display  + ", "+  charAt(position+1)

【讨论】：

【解决方案5】：

如果您打算使用 charAt，最简单的方法是：

var outputString = "", inputString = "Thomas", i = -1, inputLength = inputString.length

while(++i < inputLength){
  outputString += inputString.charAt(i)
  console.log(outputString)
}

如果它确实需要打印“t, th, tho, thom, thoma, thomas”而不是一系列日志，那么这个版本就可以做到这一点

var outputString = "", outputArray = [], inputString = "Thomas", i = -1, inputLength = inputString.length

while(++i < inputLength){
  outputString += inputString.charAt(i)
  outputArray.push(outputString)
}


console.log(outputArray.join(", "))

【讨论】：