0

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 <p> elements inside a specified container (once), and then iterates through them giving each to this function:

var re = /(&gt;.+(<br>)?[\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);
    }
}

It is supposed to extract every match into a different <p> element, and the text after it into another <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 <p> elements for unmatched text) I'm not asking about those, the main problem is:

If the greenp.innerHTML = txt[0]; 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 greenp.innerHTML = "example";, it doesn't. Properly creates and places the <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 re.exec(curtext) somehow catches the newly created <p> sibling, even though it seems impossible. Does anyone have any tips what's wrong and how to fix it?

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.

var re = /(&gt;.+(<br>)?[\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 < plist.length;i++) {
    greenChange(plist[i]);
}

}
Deuxis
  • 227
  • 1
  • 11
  • 3
    Don't use regex to manipulate html. Use the DOM. – Matt Burland Mar 02 '16 at 20:35
  • @MattBurland From what I understand in my case regex interacts only with a string that is the content of a

    element, prepared by the .innerHTML property of a DOM object. It never sees the code outside. I know manipulating HTML with regex [makes baby jesus cry](http://stackoverflow.com/a/1732454/113632).

    – Deuxis Mar 02 '16 at 20:49

0 Answers0