I am creating an addon for XKCD’s substitutions. I have what I’m calling a working prototype, but it causes problems with pages even as it does work. Can anyone suggest a better way to replace things? https://github.com/Arenlor/xkcd_sub_we
Yes.
First of, you should separate the replacement data from your code. Have files with you substitution strings and files with your substitution logic, e.g.:
strings.js:
window.substitutions = {
'_Bar': `Xyz`,
'foo Bar': `bar Baz`,
'xyz': `abc`,
};
substitute.js:
const keys = Object.keys(substitutions);
const strings = Object.values(substitutions);
const regExp = new RegExp('(?:'+ keys.map(key => '('+ escape(key.replace(/^_/, '')) +')').join('|')+ ')', 'gi');
function substitute(string) {
return string.replace(regExp, (original, ...match) => {
const index = match.findIndex(x => x);
const string = strings[index];
const key = keys[index];
if (key[0] === '_' && original[0] !== key[1]) {
return string[0].toLowerCase() + string.slice(1);
} else {
return string;
}
});
}
function escape(string) {
return string; // TODO: should escape all RegExp control chars
}
This uses a single RegExp for arbitrary many substitutions because it is (probably) faster, doesn’t replace stuff in strings that are already replaced, allows for longer matches in places where a short one would match too:
substitute('something foo Bar blub') results in something bar Baz blub even though the Baz => Xyz rule was specified first.
And a ‘_’ as a prefix signals that a leading uppercase letter should be lowercased if it is lowercase in the original string:
substitute('some bar stuff') ==> some xyz stuff and not some Xyz stuff.
Remaining problem: where to replace:
What you are doing is by changing document.body.innerHTML is the equivalent to : “I don’t like the color of that wall, let’s bulldoze the house, change the blueprint and build it from scratch”. It re-creates all elements, so all existing references to the old elements are invalid. That’s wat’s is breaking the sites.
What you probably want to do is “walk” along the bodys DOM, ignore some parts (e.g. scripts), but otherwise grab all Text nodes and replace their .textContent. The result is the same, just without the bulldozing part.