I have problems with the replaceChild, could someone help me?

Question

I'm trying to replace the <span> tags with the tags <a>

My initial html is:

<p>
 <span class="mention" data-label="59c01a091ebfff41906d6faa">Cesar Romero</span> 
 <span class="mention" data-label="59b81da0c9c18e778824447a">Gustavo Medina</span> 
 <span class="mention" data-label="59bcd70b2d488f3c64efbceb">Ramses Coraspe</span> 
 <span class="mention" data-label="59bfd252bfb7a7024070c2f1">carlos valdez</span> 
 </p>

After function executing the output is:

 <p>
  <a class="mention" href="/professional/59c01a091ebfff41906d6faa">Cesar Romero</a> 
  <span class="mention" data-label="59b81da0c9c18e778824447a">Gustavo Medina</span> 
  <a class="mention" href="/professional/59bcd70b2d488f3c64efbceb">Ramses Coraspe</a> 
  <span class="mention" data-label="59bfd252bfb7a7024070c2f1">carlos valdez</span> 
 </p>

For some strange reason the replaceChild does does not the replacement in all iterations.

The code I am using is:

function ProcessPost(htmlstring){               

    var parser = new DOMParser();
    var doc = parser.parseFromString(htmlstring, "text/html");
    var elements = doc.getElementsByTagName ("p");

    if (elements.length>0){
        for(var i =0; i < elements.length; i++){                    
            var spans= elements[i].getElementsByTagName ("span");
            for(var j =0; j<spans.length; j++){
                var aTag = document.createElement("a");
                aTag.setAttribute("class", spans[j].getAttribute("class"));
                aTag.setAttribute("href", createUrl(spans[j]));
                var aTag_content = document.createTextNode(spans[j].innerText);
                aTag.appendChild(aTag_content);                     
                var parentSpan = spans[j].parentNode;
                parentSpan.replaceChild(aTag, spans[j]);                                                                        
            }
            console.log(elements[i])                      
        }
    }

}

Has anyone had experience in using replaceChild? Could you help me find what I'm doing wrong?

Please show what your actual result is and explain how it differs from what you want. — Code-Apprentice, Jan 12 '18 at 02:03
Hi, see the example above, i need all the replacements correct with `` tags — Ramses Alexander Coraspe, Jan 12 '18 at 02:06
Change your DOM selection to this: `var elements = doc.querySelectorAll("p span");` and then only use a single loop, since you selected the spans directly. — , Jan 12 '18 at 02:06
Sorry if this seems silly, but why don't you do something like: `theParentElement.innerHTML = theParentElement.innerHTML.replace(//gi, '');` both for `` and ``? Since you must not only replace the tags, but also some attibutes. I actually think this could be rendered faster for a large number of items — flen, Jan 12 '18 at 02:11
the doc.querySelectorAll ("p span") is only using a single item in the object array, I need to iterate over all the possible tags — Ramses Alexander Coraspe, Jan 12 '18 at 02:12
Use this: theParentElement.innerHTML = theParentElement.innerHTML.replace (/ / gi, ''); It can be dangerous, the variable htmlstring is text that the user write, so the user can write for example the word 'span' — Ramses Alexander Coraspe, Jan 12 '18 at 02:13
I see, good point. Concerning your question regarding querySelectorAll, it uses as argument a CSS selector, so if you want all `
` you should input only querySelectorAll('p'). The main advantage of using querySelector is that it doesn't return a live list (it returns a static list), while getElements... does, and this is not good for iteration — flen, Jan 12 '18 at 02:20
i tried with querySelectorAll and it is working correct now, thanks guys. — Ramses Alexander Coraspe, Jan 12 '18 at 02:25
related: https://stackoverflow.com/questions/28163033/when-is-nodelist-live-and-when-is-it-static — flen, Jan 12 '18 at 02:40

score 0 · Accepted Answer · answered Jan 12 '18 at 02:25

Using the querySelectorAll

function sendPost(){                

    var parser = new DOMParser();
    var doc = parser.parseFromString(vm.textEditor.doc, "text/html");
    var elements = doc.querySelectorAll('p');

    if (elements.length>0){
        for(var i =0; i < elements.length; i++){                    
            var spans= elements[i].querySelectorAll("span");
            for(var j =0; j<spans.length; j++){
                var aTag = document.createElement("a");
                aTag.setAttribute("class", spans[j].getAttribute("class"));
                aTag.setAttribute("href", createUrl(spans[j]));
                var aTag_content = document.createTextNode(spans[j].innerText);
                aTag.appendChild(aTag_content);                     
                var parentSpan = spans[j].parentNode;
                parentSpan.replaceChild(aTag, spans[j]);                                                                        
            }
            console.log(elements[i])                      
        }
    }                   
}

I would suggest also including the explanation for why this works: querySelector returns a static list, so every time you iterate and change the tag of one item in the list, the list remains the same (static). Meanwhile, using getElementsByTagName returns a live list, so each time an element of that list (sorted by *tag name*) has its tag changed to something else, it is removed from the list. That means that list[1] will now refer to something else (because a previous item was removed from the list, so it is one element shorter), since it's a *live list* — flen, Jan 12 '18 at 02:33

I have problems with the replaceChild, could someone help me?

1 Answers1