Question

I would like to modify text in a document that is in the form of a date and replace it with a link to add an event on that date to Google Calendar. I mostly have this working with one caveat, it tries to add the link inside of already existing links that have dates in them.

document.body.innerHTML = document.body.innerHTML.replace(arrayDates[i], arrayDates[i] + " <a href=\"http://www.google.com/calendar/event?action=TEMPLATE&text=someevent&dates=" + dateString + "&details=&location=&trp=false&sprop=&sprop= target=\"_blank\"> <img src=\"" + chrome.extension.getURL("Config-date-16.png") + "\" title=\"Add this event to your Google Calendar\"> </a> ");

I thought of just running the replacement on the innerHTML string of all p tag elements: eg

arrayP = document.body.getElementsByTagName("p");
for(i=0;i<arrayP.length:i++) {
    arrayP[i].innerHTML = arrayP[i].innerHTML.replace(arrayDates[i], arrayDates[i] + " <a href=\"http://www.google.com/calendar/event?action=TEMPLATE&text=someevent&dates=" + dateString + "&details=&location=&trp=false&sprop=&sprop= target=\"_blank\"> <img src=\"" + chrome.extension.getURL("Config-date-16.png") + "\" title=\"Add this event to your Google Calendar\"> </a> ");
}

but this also includes the children (eg links a tag). I’m not sure of how I can only replace the innerHTML for the p tag elements without it’s children.

Other than removing all elements with an a tag (it will also mangle images and such so I should do the same with those elements as well), running the replacement, and reinserting tag elements, I cannot think of another way around the issue of mangling already existing links (ideas welcome).

Sadly I’m also having trouble with this. I could use a regex to match all elements in the innerHTML string, but I think it would be less kludgey to use the DOM.

I tried the following, but I’m not sure how to get around the problem of not knowing which child tobeReplacedNodes[i] belongs to: (edit: i could probably call .parent or somesuch to figure out what it’s parent is… I’ll try this out again and report back how it goes)

tobeReplacedNodes = document.body.getElementsByTagName("a");
for(i=0;i<tobeReplacedNodes.length;i++) {
    tobeReplacedNodes[i] = document.body.replaceChild(element, tobeReplacedNodes[i]);
}

What I have so far is here: http://code.google.com/p/calendar-event-adder/ (testing branch is most current)

Any ideas/suggestions are appreciated, thanks!

Answer 1

Walk the DOM recursively, skip over links (and their children) and process only nodes which nodeType is "text". You should have a Text node inside everything that has text, including <p>.