Find text (ISBN) on page and attach link on it in JS - firefox

Question

For a browser (Firefox) addon I need to find ISBN's on certain pages (such as: amazon.com, book.com).
I need to find those DOM elemets containing the ISBN and manipulate them with a link, which sends the ISBN to a REST Webservice for further logic.
Since I'm new to JavaScript I don't have any idea how to get into this because the homepages differ in how they display the ISBN.
This is the current implementation:
var self = require("sdk/self");
// a dummy function, to show how tests work.
// to see how to test this function, look at test/test-index.js
function dummy(text, callback) {
callback(text);
}
exports.dummy = dummy;
var tag = "body"
var buttons = require('sdk/ui/button/action');
var tabs = require("sdk/tabs");
var pageMod = require("sdk/page-mod");
var data = require("sdk/self").data;
var button = buttons.ActionButton({
id: "mozilla-link",
label: "Visit Mozilla",
icon: {
"16": "./icon-16.png",
"32": "./icon-32.png",
"64": "./icon-64.png"
},
onClick: handleClick
});
function handleClick(state) {
//tabs.open("http://www.mozilla.org/");
tabs.open("http://www.amazon.com");
}
pageMod.PageMod({
include: "*",
contentScriptFile: data.url("modify-content.js"),
onAttach: function(worker) {
worker.port.emit("getElements", tag);
worker.port.on("gotElement", function(elementContent) {
console.log(elementContent);
});
}
});
This is the modify-content.js
self.port.on("getElements", function(tag) {
var elements = document.getElementsByTagName(tag);
for (var i = 0; i < elements.length; i++) {
var isbn = elements[i].innerText.match("(ISBN[-]*(1[03])*[ ]*(: ){0,1})*(([0-9Xx][- ]*){13}|([0-9Xx][- ]*){10})");
if(isbn != undefined){
//self.port.emit("gotElement", elements[i].innerHTML);
console.log(isbn);
}
self.port.emit("gotElement", elements[i].innerHTML);
}
});
The ISBN's are found. But how do I manipulate the DOM Element surrounding the ISBN?

Answer 1

If I understand your question correctly, you're having trouble translating back from a innerText regexp match, which is a string, to the nearest html element of that match.
The difficult part is that the DOM is a tree. So if a <div> has a <p> which has a <span> which has an ISBN number, all of those elements' innerText will contain that ISBN number. We want to reach the "deepest" element that contains a match, ignoring all of its parents.
One (rather expensive, brute-force) way of doing this, is by recursively looping through your elements, layer by layer.
When there is a match in the innerText, we'll look at every child element.
If none of the children has a match, we return the current element because it's the last known DOM element that had a match
Other than performance, I think there are still edge cases that won't match. For example, if there's a <span> that contains three, comma separated, ISBN numbers. You'll probably have to add one last layer: a layer that creates new elements around each individual string.
var isbnRegExp = new RegExp("(ISBN[-]*(1[03])*[ ]*(: ){0,1})*(([0-9Xx][- ]*){13}|([0-9Xx][- ]*){10})");
var start = document.body;
var findDeepestMatch = function(el, regexp, result) {
result = result || [];
if (regexp.test(el.innerHTML)) {
var childMatches = Array.from(el.children)
.filter(child => regexp.test(child.innerHTML));
// Case 1: there's a match here, but not in any of the children: return el
if (childMatches.length === 0) {
result.push(el);
} else {
childMatches.forEach(child => findDeepestMatch(child, regexp, result));
}
}
return result;
};
console.time("Find results")
var results = findDeepestMatch(start, isbnRegExp);
console.timeEnd("Find results")
var makeISBN = el => {
el.classList.add("isbn");
el.addEventListener("click", () => console.log(el.innerText));
};
results.forEach(makeISBN);
.isbn { color: green; border-radius: 3px; background: rgba(0,255,0,0.2); cursor: pointer; }
<div>
<div>
<ul>
<li>
Some book: <span>978-0451524935</span>
</li>
<li>
Some nested book: <span><strong>ISBN</strong>-978-0451524935</span>
</li>
<li>
Some phone number: <span>0012-34-5678909</span> <code><-- regexp problem?</code>
</li>
<li>
Some email: <span>abc#def.gh</span>
</li>
</ul>
</div>
<div>
Here are no isbn numbers
</div>
Here's one <a><strong>ISBN</strong>-<em>978</em>-0451524935</a>
</div>