javascript - spec - html5 whatwg

Insertar HTML con JS

Question

Estoy un poco perplejo por algo en el momento en que tengo el siguiente código que funciona como se esperaba, todo está bien con eso. Sin embargo, me gustaría hacer algunos cambios menores, ya que me gustaría que la siguiente función pueda insertar el marcado HTML en el texto, es decir;

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)

Entonces, en este momento, esta función toma una matriz, divide y luego usa el método setInterval que he iterado sobre la longitud de la cadena. Esto permite que el texto parezca escrito.

Sin embargo, como puedes ver, mi valor inicial de str es ''var str = "¡Vamos a prepararnos para el futuro!";''

Sin embargo, me gustaría agregar un salto a mi valor str ''var str = "Vamos a obtener
¡Future Ready! "''

¿Primero de es posible? En segundo lugar, si alguien pudiera ofrecerme algún consejo, estaría agradecido, gracias.

Answer 1

Entonces, ¿quieres un salto de línea en el texto HTML que insertas?

Insertar un

<br />

en la matriz en el lugar donde desea que se rompa el texto. Para insertar un elemento en una matriz, mire la función splice () de javascript: http://www.w3schools.com/jsref/jsref_splice.asp

ejemplo con tu código:

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

Answer 2

Mi sugerencia es reemplazar el | personaje con <br> al hacer el ciclo. Compruébelo aquí: 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

Verifique el fragmento a continuación. Explicación en comentarios

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>