Inserimento di HTML con JS

Question

Sono solo un po 'perplesso su qualcosa al momento ho il seguente codice che funziona come previsto, tutto va bene con esso. Tuttavia vorrei apportare alcune modifiche minori, poiché mi piacerebbe che la seguente funzione fosse in grado di inserire il markup html all'interno del testo stesso i.e;

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) 

Quindi al momento, questa funzione accetta un array, di dividere e quindi utilizzando il metodo setInterval ho iterata la lunghezza della stringa. Ciò consente al testo di apparire come se fosse digitato.

Come potete vedere, il mio valore iniziale di str è 'var str = "Prendiamo il futuro pronto!";'

Tuttavia vorrei aggiungere una pausa per il mio valore str 'var str = "Let' s Get
Future Ready!"'

In primo luogo è possibile? In secondo luogo, se qualcuno potesse offrirmi qualche consiglio, sarei grato, grazie.

Answer 1

Quindi vuoi inserire un'interruzione di riga nel testo HTML che inserisci?

Inserire un

<br /> 

nella matrice nel punto in cui si desidera che il testo break.For l'inserimento di un elemento in una matrice sguardo alla funzione di giuntura() di javascript: http://www.w3schools.com/jsref/jsref_splice.asp

ad esempio con il codice:

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

Answer 2

il mio suggerimento è quello di sostituire il carattere | con <br> quando si esegue il ciclo. Dateci un'occhiata qui: 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

Controllare il frammento di seguito. spiegazione nei commenti

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>