I'm trying to make a chrome extension that bolds the first half of each word on a page. I've gotten it to work changing the first half of every word to uppercase by changing each text element's nodeValue, but in bolding words is not as simple as changing them to uppercase because the letters need the tags surrounding them. I've tried replacing each text element's innerHTML to have the updated bolded letters but nothing changes on the page? Is it because the text elements need to be refreshed?
I modified code from the popular chrome extension "Cloud to Butt". It calls the function handleText() for each text element there is on a page.
function handleText(textNode) {
var v = textNode.nodeValue;
console.log(v);
var y = v.split(" "); //string split by space -> converted to list
console.log(y);
$(textNode).html(function() { //.html() changes the pages html code so that we can add <b> </b> bold tags into words
for (var i in y) {// #iterates through every value/element in list
console.log(y[i])
if ((y[i]).length == 1) { //#base-case EX/ a, i, e... 1 letter words
var printStr = "<b>" + y[i] + "</b>"; // makes the word bold
console.log(printStr);
v = v.replace(y[i], printStr); //replaces the word with the bold version
}
else if ((y[i]).length / 2 % 1 == 0) { //#if its an even number
var fullStr = y[i]; //#gets a name so its recognizable
var cutlen = (fullStr).length / 2; //# takes the word "Apples" length (6), halves it, cuts off decimals so it's 3
var backStr = fullStr.slice(cutlen, fullStr.length); //takes the back half of the word --> "les"
var frontStr = fullStr.slice(0, cutlen); // takes the front half of the word --> "app"
var printStr = "<b>" + frontStr + "</b>" + backStr; // "<b>app</b>les"
console.log(printStr);
v = v.replace(y[i], printStr); //replaces the word with the new version of the word
}
else if ((y[i]).length / 2 % 1 != 0) {//if it's an odd number
var fullStr = y[i];
var cutlen = ((fullStr).length - 1) / 2; // #Makes length even, rounding down
var backStr = fullStr.slice(cutlen, fullStr.length); //takes the back half of the word
var frontStr = fullStr.slice(0, cutlen); //takes the front half of the word
var printStr = "<b>" + frontStr + "</b>" + backStr; //combines them to make the full word with a bolded first half
console.log(printStr);
v = v.replace(y[i], printStr); //replaces the word with the new version of the word
}
}
return (v); //substitute the text in the page with this new text, which is the same but bolded.
})
//console.log(textNode);
//console.log(textNode.innerHTML);
//console.log(v);
//textNode.reload;
}
The result is that the webpage remains unchanged. In the console it shows that there was modifications to textNode's contents but it doesn't actually show up in the page. Is that because the element needs to be re-rendered? Is that possible?
Thank you!
