Wstawianie HTML z JS

Question

Jestem po prostu trochę zakłopotany na coś w tej chwili Mam następujący kod, który działa zgodnie z oczekiwaniami, wszystko jest w porządku z nim. Chciałbym jednak wprowadzić drobne zmiany, ponieważ chciałbym, aby następująca funkcja mogła wstawiać znaczniki html w samym tekście, tj.

var str = "Let's get Future Ready!"; 
var split = str.split(""); 
var counter = 0; 

var SI = setInterval(function() { 

    var typeText = $('.typetext'); 
    typeText.append(split[counter]); 
    counter++ 
    if(counter == str.length){clearInterval(SI)} 

},100) 

Więc w tej chwili, to funkcja przyjmuje tablicę, Split, a następnie przy użyciu metody setInterval Mam iterowany na całej długości strun. Dzięki temu tekst może wyglądać tak, jakby był wpisywany.

Jak widzisz, moją początkową wartością jest "var str =" Przygotujmy się na przyszłość! ";

Jednak chciałbym dodać przerwę do mojego wartość STR var str = «Chodźmy
Future gotowy!» '

Po pierwsze jest to możliwe? Po drugie, jeśli ktoś mógłby zaoferować mi jakąś radę, byłbym wdzięczny, dzięki.

Answer 1

A więc chcesz wstawić podział wiersza w wstawianym tekście HTML?

wstawić

<br /> 

do tablicy w miejscu, w którym chcesz wstawić tekst do break.For wstawiania elementu do wiadomości wygląd tablicy w funkcji splice() javascript: http://www.w3schools.com/jsref/jsref_splice.asp

przykładem z kodem:

var str = "Let's get Future Ready!"; 
var split = str.split(""); 
var counter = 0; 
split = split.splice(18, 0, "<br />"); 

Answer 2

Moja sugestia jest zastąpienie znaku | z <br> podczas wykonywania pętli. Sprawdź to tutaj: https://jsfiddle.net/s04zbfcc/

var str = "Let's get|Future Ready!"; 
var split = str.split(""); 
var counter = 0; 

var SI = setInterval(function() { 

    var typeText = $('.typetext'); 

    typeText.append(split[counter] == '|' ? '<br>' : split[counter]); 
    counter++ 

    if(counter == str.length) { 
     clearInterval(SI) 
    } 

},100) 

Answer 3

Sprawdź poniższy fragment. Wyjaśnienie w komentarzach

var str = "Let's get Future Ready!"; 
 
var split = str.split(""); 
 
var counter = 0; 
 

 
var SI = setInterval(function() { 
 

 
    var typeText = $('.typetext'); 
 
    typeText.append(split[counter]); 
 
    counter++ 
 
    if(typeText.text()=="Let's get")//check the text and see if it has Let's get 
 
     typeText.append("<br/>");//if yes append br there 
 
    if(counter == str.length){ 
 
     clearInterval(SI); 
 
    } 
 

 
},100)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="typetext"></div>