title: Make a function in Javascript that reads text file into a string and search characters to change them
body: <p>I'm developing a web app for my social service, my problem is that i need to read a text file that is actually an html file that is in my local folder.</p>
  
  <p>In that file i need to find some values and change them to the ones i have selected in my app.</p>
  
  <p>The main objective for my app is to change the images that one project uses to the ones selected on my app and i want to just read the html file and update the "src" values of the html to the ones the user have selected on my app.</p>
  
  <p>I havent found something similar to what i want to and the ones that i tried im having trouble understanding it or it wont work.</p>
  
  <p>This is the html that i want to read and change some values</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Escenario Virtual de Imagenes&lt;/title&gt;
  
  
  
      &lt;script src="js/aframe.min.js"&gt;&lt;/script&gt;
       &lt;script&gt;
  
  
  //variables de estimulos dentro del arreglo de secuencias//
          var neutro='img/negro.png';
          var instruccionesImagenes='img/Imagenes_instrucciones.png';
          var imagen1='img/1.jpg'; &lt;--- i want to change this number of the path of all.
          var imagen2='img/2.jpg';
          var imagen3='img/3.jpg';
          var imagen4='img/4.jpg';
          var imagen5='img/5.jpg';
          var imagen6='img/6.jpg';
          var imagen7='img/7.jpg';
          var imagen8='img/8.jpg';
          var imagen9='img/9.jpg';
          var imagen10='img/10.jpg';
          var imagen11='img/11.jpg';
          var imagen12='img/12.jpg';
          var imagen13='img/13.jpg';
          var imagen14='img/14.jpg';
          var imagen15='img/15.jpg';
          var imagen16='img/16.jpg';
          var imagen17='img/17.jpg';
          var imagen18='img/18.jpg';
          var imagen19='img/19.jpg';
          var imagen20='img/20.jpg';
          var evaluacion='img/sam.png';
          var bienvenida='img/inicio.png';
          var imagenes=new Array([bienvenida],['img/OC.png'],['img/instruccion2.png'],['img/OA.png'],[neutro],[instruccionesImagenes],[imagen1],[imagen2],[imagen3],[imagen4],[imagen5],[evaluacion],[neutro],[imagen6],[imagen7],[imagen8],[imagen9],[imagen10],[evaluacion],[neutro],[imagen11],[imagen12],[imagen13],[imagen14],[imagen15],[evaluacion],[neutro],[imagen16],[imagen17],[imagen18],[imagen19],[imagen20],[evaluacion],['img/finalizar.png']);
  //////////////////////////////////////////////////////////////////////////////////////////// 
      // * Funcion para cambiar la imagen 
  var imagen = 0;//contador de cambio de posicion
  function cambiar()
  {
      if(imagen &lt; imagenes.length)
      {
            document.querySelector('a-image').setAttribute('src', imagenes[imagen]);
            if (imagenes[imagen]==neutro)
             {
  
               setTimeout("cambiar()", 30000);//si la imagen del array es neutro entonces que solo pase 15 segundos
               document.getElementById('sonido').setAttribute('sound', 'src', 'narrativas/relax.mp3' );
  
             }else if (imagenes[imagen]==bienvenida) 
             {   
                  setTimeout("cambiar()", 13000);
                  //document.getElementById('sonido').setAttribute('sound', 'src', 'narrativas/1.mp3' );
             } else if (imagenes[imagen]==instruccionesImagenes) 
             {
              setTimeout("cambiar()", 15000);//si la imagen del array es  evaluacion entonces que solo pase 10 segundos
              //document.getElementById('sonido').setAttribute('sound', 'src', 'narrativas/5.mp3' );
              // TODO colocar imagene de instruccuiones
             } 
             else if (imagenes[imagen]==evaluacion) 
             {
              setTimeout("cambiar()", 15000);//si la imagen del array es  evaluacion entonces que solo pase 10 segundos
              document.getElementById('sonido').setAttribute('sound', 'src', 'narrativas/evaluacion.mp3' );
             } else if (imagenes[imagen]=='img/OC.png') //si la imagen del array es  ojos cerrados entonces que recorra el time a 2 minutos
             {
             document.getElementById('sonido').setAttribute('sound', 'src', 'narrativas/2.mp3' );
             setTimeout("cambiar()", 70000);
             }
               else if (imagenes[imagen]=='img/instruccion2.png')//si la imagen del array es  la instruccion ojos abiertos entonces que recorra el time a  7 segundos
                {
             document.getElementById('sonido').setAttribute('sound', 'src', 'narrativas/3.mp3' );
             setTimeout("cambiar()", 15000)
                }
               else if (imagenes[imagen]=='img/OA.png') //si la imagen del array es  ojos abiertos entonces que recorra el time a 2 minutos
               {
             document.getElementById('sonido').setAttribute('sound', 'src', 'narrativas/4.mp3' );
              setTimeout("cambiar()", 60000);
               }else if (imagenes[imagen]=='img/finalizar.png')
                {
                document.getElementById('sonido').setAttribute('sound', 'src', 'narrativas/8.mp3' );
                }
             else//si la imagen del array es  la foto 1.2.3.4.5 entonces que recorra el time a 30 segundos
             {
             //document.getElementById('sonido').setAttribute('sound', 'src', 'sound/music.webm' );
              setTimeout("cambiar()", 15000);//15 segundos iaps
  
             }
             imagen=imagen+1;
      }
  }
  
      /**
  
       * Función que se ejecuta una vez cargada la página
  
       */
  
       onload=function()
  
       {
  
        //setTimeout("", 30000);
        cambiar();
  
      }
  
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;a-scene &gt;
       &lt;!--controles leapmotion--&gt;
  &lt;a-entity camera="near: 0.01" look-controls &gt;
    &lt;a-entity leap-hand="hand: left;"&gt;&lt;/a-entity&gt;
    &lt;a-entity leap-hand="hand: right;"&gt;&lt;/a-entity&gt;
  &lt;/a-entity&gt;
  
          &lt;!--cursor--&gt;
  
  
          &lt;a-sky src="img/cielo.png" &gt;&lt;/a-sky&gt;
              &lt;!--&lt;a-light type="ambient" color="#222"&gt;&lt;/a-light&gt;
          piso del entorno virtual--&gt;
          &lt;a-circle color="black" material="opacity:0.2" radius="60" position="0 -10 0" rotation="-90 0 0" &gt;&lt;/a-circle&gt;
  
          &lt;!--Voz de Recomendador--&gt;
  &lt;!--
          &lt;a-entity id="play" geometry="primitive: circle" material="color: yellow" position="-10 3 0" sound="src: sound/music.webm; volume:0.89 ;  on: click" &gt;&lt;/a-entity&gt;
  
                  &lt;a-entity cursor-listener geometry="primitive: circle" material="color: black" position="10 3 0" &gt;&lt;/a-entity&gt;
  --&gt;
  
      &lt;!--musica de inicio--&gt;         
       &lt;a-entity id="sonido" geometry="primitive: circle" material="color: yellow " position="-3 30 0" sound="src: 'sound'; volume:5;autoplay:true " &gt;
  
       &lt;/a-entity&gt;
  
  
          &lt;!--pantalla  donde se muestran las imagenes--&gt;
          &lt;a-image  src=" " height="8" width="15"  position="0 2 -8"  rotation="0 0 0" &gt;&lt;/a-image&gt;
  
      &lt;/a-scene&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>So the result that i need is to change the values of the src for it to change to the images that the user wants.
  Thank you in advance ive been stuck on this for 1 month and im really stressed about it because im not so good at coding.</p>