2016-08-30 3 views
1

본질적으로 화면에 텍스트를 입력하는이 코드를 사용하고 있습니다. 표시되는 문자열에 새 줄을 추가하는 방법을 잘 모르겠습니다.JavaScript를 사용하여 HTML 텍스트에 새 줄을 추가하는 방법은 무엇입니까?

나는 답변을 게시하는 사람들에게 이미 \ n을 시도했습니다. 이것은 작동하지 않습니다. 새로운 라인 내 HTML에

코드 시작되지 않았습니다 :

var myString = "public class MyResume implements Resume{" + 
 
    /*this is where I want the new line*/ "...." ; 
 

 
var myArray = myString.split(""); 
 
var loopTimer; 
 
function frameLooper() { 
 
    if(myArray.length > 0) { 
 
    document.getElementById("myTypingText").innerHTML += myArray.shift(); 
 
    } else { 
 
    clearTimeout(loopTimer); 
 
    return false; 
 
    } 
 
    loopTimer = setTimeout('frameLooper()',70); 
 
} 
 
frameLooper();
<div id="myTypingText"></div>

+1

var에 MyString에 = '구현이 다시 시작 MyResume 공용 클래스는 {\ n'+ –

+0

나는 이미 시도했다. 새 줄을 시작하지 않지만 '\ n'이 텍스트에 나타나지 않습니다. –

답변

2

여기의

+0

그래,이 일했다. 감사! –

1

새로운 라인에 문자열을 추가하기를, 당신은 당신의 문자열의 \n이 필요합니다. 예를 들면 :

var string = 'This is the first line \nThis is the second line' 

console.log(string) 

이 것 또한 "your string.<br> new line"

+0

아니요, 작동하지 않습니다. 새 줄을 시작하지 않지만 '\ n'이 텍스트에 나타나지 않습니다. –

+0

새 줄을 시작하는 방법을 알고 있습니다. 단지 내 HTML에서 작동하지 않습니다. –

4

출력 한 번. 문자가 innerHTML에 추가됩니다 때, 자바 스크립트를 인코딩 : 당신이 <br>에서 각 문자에 대한 이런 짓을하면

$('element').innerHTML += "<"; 
> "string&lt;" 

, 당신은

>"string&lt;br&lt;" 

로 끝날 것 당신은 당신의 스크립트를 알려줄 수있는 방법이 필요합니다 "중단 문자"에 도달하면 전체 요소를 추가합니다. 당신은 파이프 |과 같은 희귀 한 문자를 사용하거나 다음 몇 글자가 <br>으로 끝나지 않는지 미리 확인하는 방법을 추가 할 수 있습니다.

document.getElementById("myTypingText").innerHTML += "<p>" + myArray.shift() "</p>"; 

또는

document.getElementById("myTypingText").innerHTML += "<li>" + myArray.shift() "</li>"; 

과 :

<ul id="myTypingText"></ul> 
+0

이것은 작동하지 않습니다. HTML이 인식되지 않습니다. 화면에 "
"이 표시됩니다. –

2

은 단순히 당신이 각 문자를 삽입하고 있기 때문에 작동하지 않습니다 myString-<br>을 추가하는 등 <br> 년 그냥 사용할 수 있습니다

This is the first line 
This is the second line 
+0

예, 많은 의미가 있습니다. 감사. 각 문자를 배열로 분할하기 때문에 break 문을 어떻게 찾을 수 있습니까? 아니면 이것을하는 더 쉬운 방법이 있습니까? –

+0

희귀 한 캐릭터를 사용하거나 스크립트를 미리 보도록지도하십시오. – Polyov

+0

희귀 문자를 추가 한 다음 해당 문자를 기반으로 문자열을 분할 할 수 있습니까?그런 다음 각 부분 문자열을 자체 문자로 개별적으로 분할 할 수 있습니까? –

0

왜 그냥 텍스트로 이런 일을 UL> 리 또는 P를 추가하지 않습니다 전체 코드로 지나치게 단순한 접근법. 이 같은
를 삽입하여 frameLooper에 대한 ~ 물결표를 사용하고 시계 :

<html> 
<body> 
<div id="myTypingText"></div> 
<script> 
var myString = 'public class MyResume implements Resume{~....' ; 

var myArray = myString.split(""); 
var loopTimer; 
function frameLooper() { 
if(myArray.length > 0) { 
    var char = myArray.shift(); 
     if (char === '~') 
    { document.getElementById("myTypingText").innerHTML += '<br/>'; } 
    else 
    { document.getElementById("myTypingText").innerHTML += char; } 
} else { 
    clearTimeout(loopTimer); 
      return false; 
} 
loopTimer = setTimeout('frameLooper()',70); 
} 
frameLooper(); 
</script> 
</body> 
</html> 
+0

이것은 각 문자를 새로운 단락 lol에 추가합니다. 실제 자바 프로그램처럼 보이도록 문자열을 포맷하고 싶습니다. –

관련 문제