I am working on a project to enhance readability by replacing each word in a document's P tags with a span element. The code I have works well for the first case, but subsequent replacements start to mess up the HTML structure of the P tag. Here is an image of the issue
I'm wondering if my approach needs adjusting or if there is a way to only modify the innerHTML between the tags?
const runBionic = (node: ChildNode, paragraph: HTMLElement):HTMLElement => {
if (node.textContent === null) return paragraph;
const originalWords:string[] = node.textContent.split(" ");
const filteredWords: string[] = originalWords.filter(word => word!=="" && word !== "\n");
console.log("Filtered words: ", filteredWords);
//replace each word with a span element
filteredWords.forEach(word => {
const modifiedWord = `<span style='font-weight: bold;'>${word}</span>`;
console.log("REPLACING ", word, "WITH ", modifiedWord);
paragraph.innerHTML = paragraph.innerHTML.replaceAll(word,modifiedWord);
});
return paragraph;};
My ultimate goal is to create a chrome extension that highlights the first half of characters of any word on a web page to assist dyslexic individuals in reading faster. You can find the complete repository on github for more information.