Estoy tratando de hacer un efecto de reemplazar una cadena con otra, pero sin borrar completamente el contenido de la primera. Como si de un efecto especial se tratara, cada letra de una cadena se transforma en otra palabra. Al principio trato de hacerlo como una máquina de escribir, pero luego quiero hacerlo al azar. Sin embargo, no puedo hacer que funcione, parece que es un error.
let title1 = "Your sales place"; let title2 = "Software Hub"; var k = 0; var speed = 150; function typeWriter() { if (k < title1.length) { if (k >= title2.length) { title2 += title1.charAt(k); } title2 = title2.replace(title2.charAt(k), title1.charAt(k)); document.getElementById("demo").innerHTML = title2; k += 1; setTimeout(typeWriter, speed); } } typeWriter(); <div id="demo"></div>producción:
YO AESRL SUPLACEreplace reemplaza la primera aparición del carácter, que no es necesariamente el del índice k .
En lugar de mutar title2 , recomendaría simplemente hacer
….innerHTML = title2.slice(0, k) + title1.slice(k);Este es el código correcto para lo que estoy esperando. Lo siento por el error.
import { onMount } from "svelte"; let title1 = "Your sales place"; let title2 = "Software Hub"; var part = ""; var k = 0; var speed = 150; onMount(() => { typeWriter(); }); function sliceReplace(origin, final, k) { part = part.slice(0,k); part += final.charAt(k) + origin.slice(k+1); return part; } function typeWriter() { if (k < title1.length) { if (k >= title2.length) { title2 += title1.charAt(k); } document.getElementById("demo").innerHTML = sliceReplace(title2, title1, k); k += 1; setTimeout(typeWriter, speed); } }Esta es su solución con la menor modificación. El problema con su código es usar String.prototype.charAt para buscar y reemplazar su personaje, y encuentra la primera aparición de un personaje. Entonces, cuando un carácter se repite en su cadena, charAt encontrará y reemplazará la primera aparición, no las otras.
Entonces puede definir una función como replaceAt a continuación, para reemplazar un carácter en una posición específica y usar eso.
let title1 = "Your sales place"; let title2 = "Software Hub"; String.prototype.replaceAt = function(index, replacement) { return this.substr(0, index) + replacement + this.substr(index + replacement.length); } var k = 0; var speed = 150; function typeWriter() { if (k < title1.length) { if (k >= title2.length) { title2 += title1[k]; } else { title2 = title2.replaceAt(k, title1[k]); } document.getElementById("demo").innerHTML = title2; k += 1; setTimeout(typeWriter, speed); } } typeWriter(); <div id="demo"></div>Sin embargo, le recomendaría que no use variables globales como contadores cuando llame recursivamente a una función, sino que pase esa variable a su función:
let title1 = "Your sales place"; let title2 = "Software Hub"; var speed = 150; String.prototype.replaceAt = function(index, replacement) { return this.substr(0, index) + replacement + this.substr(index + replacement.length); } function typeWriter(k) { if (k < title1.length) { let title = document.getElementById("demo").innerHTML if (k >= title.length) { title += title1[k]; } else { title = title.replaceAt(k, title1[k]); } document.getElementById("demo").innerHTML = title; setTimeout(() => {typeWriter(k+1)}, speed); } } document.getElementById("demo").innerHTML = title2; setTimeout(() => {typeWriter(0);}, speed) <div id="demo"></div>