Estoy jugando con el generador de contraseñas, pero cuando la cadena contiene un < o >, rompe el HTML y solo genera algunos de los caracteres. Estoy usando innerHTML en lugar de textContent porque necesito envolver cada contraseña en un div. ¿Hay otra manera de hacer esto sin que se rompa?
const alphabetUppercase = "abcdefghijklmnopqrstuvwxyz".toUpperCase().split(''); const alphabetLower = "abcdefghijklmnopqrstuvwxyz".split(''); const symbols = "!@#$%^&*(>)_+=-`~,./;'[]\|}\"<{:\?".split(''); const numbers = "123456789".split(''); const masterArray = alphabetUppercase.concat(alphabetLower, symbols, numbers); const passwordButton = document.querySelector('.generate-passwords'); const outputPasswords = document.querySelector('.output-passwords'); passwordButton.addEventListener('click', function(e){ e.preventDefault(); let passwordArray = []; // number of passwords let counter = 4; // Reset text content outputPasswords.innerHTML = ''; for (let x = 0; x < counter; x++) { let randomPassword = ""; for (let i = 0; i < 15; i++) { let randomOutput = Math.floor(Math.random() * masterArray.length); randomPassword += masterArray[randomOutput]; } passwordArray.push(randomPassword); outputPasswords.innerHTML += '<div>' + passwordArray[x] + '</div>'; } }); <section class="generator"> <a href="#" class="generate-passwords">Generate passwords</a> <div class="output-passwords"></div> </section>Puedes hacer algo como esto: -
const div = document.createElement('div'); div.append(randomPassword); outputPasswords.append(div);En lugar de usar div como una cadena, cree un elemento "div" y luego agréguelo al elemento principal "outputPasswords"