Safely

Posted at

(function (query, style) {
"use strict";

query = top.prompt("Enter Query.", "*");
query = "string" !== typeof query || "" === query ? "*" : query;

document.querySelectorAll(query).forEach(function(element){
element.setAttribute("contenteditable", "true");
});

style = document.createElement("style");
style.appendChild(document.createTextNode([ " /*<![CDATA[*/"
, " ###REPLACE_ME###, ###REPLACE_ME###:before, ###REPLACE_ME###:after{"
, " pointer-events: none !important;"
, " touch-action: none !important;"
, "}"
, "/*]]>*/"
].join("\
").replace(/###REPLACE_ME###/g,query)));
document.querySelector("body").appendChild(style);

return undefined;
}());


Making stuff contentEditable="true" is easy enough, but you'll find that hyperlinks (<a> elements) are still clickable,
- lucky CSS3 has some features you can add to make elements somewhat unresponsive to a click. Events hooks might still be effective though..

icompile-eladkarako-com_edit_everything_part_2_no_clicking-png', 'JavaScript Ninja - Edit Everything