<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> </head> <body> <div class="container "> <div class="form-group"> <label for="cadena">cadena original:</label> <input type="text" class="form-control" id="cadena"> </div> <div class="form-group"> <label for="cadena">cadena a buscar:</label> <input type="text" class="form-control" id="buscar"> </div> <h1 id="posicion"></h1> <button type="button" onclick="buscar()">Buscar</button> <script src="js/test.js"></script> </form> </div> </body> </html>
function buscar () { const cadena = document.getElementById('cadena').value const buscar = document.getElementById('buscar').value document.getElementById('posicion').innerHTML = '' let pos = cadena.indexOf(buscar) // ¿Cuando tenemos que parar la búsqueda? Cuando no encuentre la cadena a buscar // ¿Cómo se yo que no la ha encontrado? Porque indexOf devuelve -1 // ¿Cual es la condición del while? Mientras la posición no sea -1 es que ha encontrado algo // Mientras pos>-1 sigue buscando porque la hemos encontrado while (pos > -1) { document.getElementById('posicion').innerHTML += pos + ',' pos = cadena.indexOf(buscar, pos + 1) } } // cadena="En un lugar de la mancha" // buscar="a" // Busca la 'a'. La encuentra en la posición 9 // ¿Es 9 mayor que -1? Sí por lo tanto // Lo pone en el HTML 9, // Y buscamos la aparición de 'a' a partir de la pos+1, es decir // Buscamos la 'a' a partir de la posición 10 // La encuentra en la posición 16 // ¿Es 16 mayor que -1? Sí por lo tanto // Lo pone en el HTML 16, // Y buscamos la aparición de 'a' a partir de la pos+1, es decir // Buscamos la 'a' a partir de la posición 17 // La encuentra en la posición 19 // ¿Es 19 mayor que -1? Sí por lo tanto // Lo pone en el HTML 19, // Y buscamos la aparición de 'a' a partir de la pos+1, es decir // Buscamos la 'a' a partir de la posición 20 // Buscamos la 'a' a partir de la posición 20 // La encuentra en la posición 23 // ¿Es 23 mayor que -1? Sí por lo tanto // Lo pone en el HTML 23, // Y buscamos la aparición de 'a' a partir de la pos+1, es decir // Buscamos la 'a' a partir de la posición 24 // Ya no encuentra la 'a', devuelve -1 y salimos del bucle // Es MUY DIFERENTE // pos++ que pos+1 // pos++ es una instrucción que modifica el valor de pos: pos=pos+1 Si pos vale 3 pasa a valer 4 // pos+1 es un valor. Que vale lo que valga pos + 1 (ej 3->4) pero que no modifica nada