Javascript- 显示字符为一个字母+一个字母等的单词

Question

所以我尝试显示在我的文本框中键入的单词，如下例所示：(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>

Answer 1

使用 Array.from and 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 and 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>

Answer 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>

Answer 3

您可以使用 Array.prototype.map and 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>

Answer 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)

Answer 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(", "))

Javascript- 显示字符为一个字母+一个字母等的单词

Javascript- displaying words with charAt one letter+one letter and so on

javascript

charat