字符串拆分方法（每行）javascript

Question

I'm trying to write a code for a program that allow the user to enter a word or sentnce in text-box then press the button.

When the user press the button the result should appear

actually I faced a problem in last part which is split the sentence and put each in separate line.

What I know is that I can put them in separate line by write a code such that:

var myString = "zero one two three four";

var mySplitResult = myString.split(" ");

for(i = 0; i < mySplitResult.length; i++){
    document.write("<br /> Element " + i + " = " + mySplitResult[i]); 
}

but when I did it, it didn't work

my code

 function t {
    var r=input.split(".");
             for (var i = 0; i < r.length; i++){
        r.innerHTML ="<br/> "  + r[i];}
          } 

Answer 1

You're overwriting your result.innerHTML with each iteration of the for loop

Try making a var str to hold your computed string and iterate over that in the for loop.

str += "Lenrth of input string: "+ input.length +"

Number of spaces: "+num +"

" +"

Replacing the word 'red' with 'blue': "+ input.replace("red" , "blue")+"

Spilting at'.':

"+ "
" + n[i];

Then outside the for loop

result.innerHTML = str

Answer 2

 for (var i = 0; i < n.length; i++) { result.innerHTML = "Lenrth of input string: "+ input.length + "<p>Number of spaces: "+num +"</p>" + "<p> Replacing the word 'red' with 'blue': "+ input.replace("red" , "blue")+"</p>" + "<p>Spilting at'.':</p><br/> " + n[i]; } 

This way, you will assign to result.innerHTML and overwrite it each loop turn - so the output you will notice is only the one from the last loop turn. Instead, you should build a html string part-by-part (including the repetion), and then assign the whole thing.

var html = "<p>Length of input string: " + input.length + "</p>";
html += "<p>Number of spaces: " + num + "</p>";
html += "<p> Replacing the word 'red' with 'blue': " + input.replace("red" , "blue") + "</p>";
html += "<p>Spilting at '.':<ul>";
for (var i = 0; i < n.length; i++) {
    html += "<li>" + n[i] + "</li>";
}
html += "</ul></p>";
result.innerHTML = html;

Answer 3

Your for loop is replacing the content on each iteration. You need to make your for loop only append the elements of n to the innerHTML of the result element.

function F1()
{  
  var str =document.getElementById("text");
  var input =  str.value;
  var result = document.getElementById( "result" );
  var num =  input.split(" ").length - 1;
  var n=input.split(".");

  result.innerHTML = "Lenrth of input string:  "+ input.length +"<p>Number of spaces:  "+num +"</p>"
  +"<p> Replacing the word 'red' with 'blue':  "+ input.replace("red" , "blue")+"</p><p>Spilting at'.':</p>";

  for (var i = 0; i < n.length; i++){
    result.innerHTML += "<br/> "  + n[i];
  }
}  

Here's a working example on jsFiddle: http://jsfiddle.net/nQ39D/