Fix – Javascript try if document.body.innerhtml var a not working

If Javascript try if document.body.innerhtml is not working for you. The main reason for this error can be getting Aside from overwriting page HTML with a…

The post Fix – Javascript try if document.body.innerhtml var a not working appeared first on CodeSource.io.


This content originally appeared on CodeSource.io and was authored by Deven

If Javascript try if document.body.innerhtml is not working for you. The main reason for this error can be getting Aside from overwriting page HTML with a single value each iteration.

When you replace the entire page HTML and break its javascript events such as click/hover handlers and many others attached via addEventListener or .on properties. Also, you overwrite the entire page, thus forcing the browser to parse it entirely and repaint. 

Consider the following example for The correct approach. All you need to replace is just the nodes that contain title text: 

// title-to-href map used for bulk regexp-replacement
var linkMap = {};
var linkTitles = [];
for (var i = 0, link; (link = document.links[i++]); ) {
    if (link.title) {
        linkTitles.push(escapeForRegex(link.title));
        linkMap[link.title] = link.href;
    }
}
// regexp that matches all titles
var titlesRx = new RegExp(linkTitles.join('|'), 'g');

// iterate all text nodes and build a list of elements that contain titles
var nodesToReplace = [];
var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
while (walker.nextNode()) {
    var node = walker.currentNode;
    var newHTML = node.nodeValue.replace(titlesRx, function(title) {
        return '<a href="' + linkMap[title] + '" title="' + title + '">' + title + '</a>';
    });
    if (newHTML != node.nodeValue) {
        nodesToReplace.push({node: node, html: newHTML});
    }
}

// replace the contents of affected elements
var scratchpad = document.createElement('div');
nodesToReplace.forEach(function(info) {
    scratchpad.innerHTML = info.html;
    for (var i = 0, child; (child = scratchpad.children[i++]); ) {
       info.node.parentNode.insertBefore(child, info.node);
    }
    info.node.remove();
});

function escapeForRegex(s) { return s.replace(/[{}()\[\]\/\\.+?^$:=*!|]/g, "\\$&"); }

The post Fix – Javascript try if document.body.innerhtml var a not working appeared first on CodeSource.io.


This content originally appeared on CodeSource.io and was authored by Deven


Print Share Comment Cite Upload Translate Updates
APA

Deven | Sciencx (2021-02-11T03:27:08+00:00) Fix – Javascript try if document.body.innerhtml var a not working. Retrieved from https://www.scien.cx/2021/02/11/fix-javascript-try-if-document-body-innerhtml-var-a-not-working/

MLA
" » Fix – Javascript try if document.body.innerhtml var a not working." Deven | Sciencx - Thursday February 11, 2021, https://www.scien.cx/2021/02/11/fix-javascript-try-if-document-body-innerhtml-var-a-not-working/
HARVARD
Deven | Sciencx Thursday February 11, 2021 » Fix – Javascript try if document.body.innerhtml var a not working., viewed ,<https://www.scien.cx/2021/02/11/fix-javascript-try-if-document-body-innerhtml-var-a-not-working/>
VANCOUVER
Deven | Sciencx - » Fix – Javascript try if document.body.innerhtml var a not working. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/02/11/fix-javascript-try-if-document-body-innerhtml-var-a-not-working/
CHICAGO
" » Fix – Javascript try if document.body.innerhtml var a not working." Deven | Sciencx - Accessed . https://www.scien.cx/2021/02/11/fix-javascript-try-if-document-body-innerhtml-var-a-not-working/
IEEE
" » Fix – Javascript try if document.body.innerhtml var a not working." Deven | Sciencx [Online]. Available: https://www.scien.cx/2021/02/11/fix-javascript-try-if-document-body-innerhtml-var-a-not-working/. [Accessed: ]
rf:citation
» Fix – Javascript try if document.body.innerhtml var a not working | Deven | Sciencx | https://www.scien.cx/2021/02/11/fix-javascript-try-if-document-body-innerhtml-var-a-not-working/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.