<!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
