title: Javascript regex.exec() looping for no logical reason
body: <p>This is quite likely the weirdest problem I've encountered in javascript and I don't even know if the title correctly describes it. I have a script that searches DOM (using getElementByTagName) for all &lt;p> elements inside a specified container (once), and then iterates through them giving each to this function:</p>
  
  <pre><code>var re = /(&amp;gt;.+(&lt;br&gt;)?[\n\r]{0,2}\s*)+/gi;
  var temp, nextp, nextptext, greenp, greenptext, curtext;
  
  function greenChange(givenp) {
      curtext = givenp.innerHTML;
      var txt = re.exec(curtext);
      while(txt) {    
          console.log(txt[0]);
          temp = curtext.indexOf(txt[0]);
          curtext = curtext.replace(txt[0],"");
          greenp = document.createElement("p");
          givenp.parentNode.insertBefore(greenp, givenp.nextSibling);
          greenp.innerHTML = txt[0];
          txt = re.exec(curtext);
      }
  }
  </code></pre>
  
  <p>It is supposed to extract every match into a different &lt;p> element, and the text after it into another &lt;p> element. I know it has a few derps (will place the paragraphs in the wrong order), and a few things I commented out and ommited here (like the part that creates &lt;p> elements for unmatched text) I'm not asking about those, the main problem is:</p>
  
  <p>If the <code>greenp.innerHTML = txt[0];</code> line is like this, it loops forever, infinitely outputting the last match into the console, but what's REALLY weird is the fact that if I change it into for example <code>greenp.innerHTML = "example";</code>, it doesn't. Properly creates and places the &lt;p> elements one after the other, all properly having "example" as text and finishes. The only semi-logical explanation I came up with is that the <code>re.exec(curtext)</code> somehow catches the newly created &lt;p> sibling, even though it seems impossible. Does anyone have any tips what's wrong and how to fix it?</p>
  
  <p>Note: If you want to see the full code, it is below. Just please note that this is my first time using clean JS to manipulate website's code. It has errors I am aware of and will fix when I get the greenChange function working. Tips are much appreciated though.</p>
  
  <pre><code>var re = /(&amp;gt;.+(&lt;br&gt;)?[\n\r]{0,2}\s*)+/gi;
  var temp, nextp, nextptext, greenp, greenptext, tempsub, curtext;
  
  function greenChange(givenp) {
      curtext = givenp.innerHTML;
      var txt = re.exec(curtext);
      while(txt) {    
          console.log(txt[0]);
          temp = curtext.indexOf(txt[0]);
          curtext = curtext.replace(txt[0],"");
          greenp = document.createElement("p");
          //greenptext = document.createTextNode(txt[0]);
          //greenp.appendChild(greenptext);
          //nextptext = document.createTextNode(curtext.substring(temp));
          //nextp.appendChild(nextptext);
          givenp.parentNode.insertBefore(greenp, givenp.nextSibling);
          greenp.innerHTML = txt[0];
          /*if(tempsub = curtext.substring(temp)) {
              nextp = document.createElement("p");
              givenp.parentNode.insertBefore(nextp, givenp.nextSibling);
              //nextp.innerHTML = curtext.substring(temp);
          }*/
          txt = re.exec(curtext);
      }
  }
  
  window.onload = function() {
  alert("Document loaded!");
  var plist = document.getElementById("contentArea").getElementsByTagName('p');
  console.log("After ploading.");
  console.log(plist[0].innerHTML);
  console.log("That was the test, now the real thing:");
  for(var i = 0;i &lt; plist.length;i++) {
      greenChange(plist[i]);
  }
  
  }
  </code></pre>