Question

I have a programming challenge, and I’m wondering what the most bug-free way to approach it is.

Basically, I have the following HMTL:

<p id="first">
    Hello lorem ispum 
    <a id="link" href="...">Link</a> 
    linkety link blag
</p>

(the id’s are for proof of concept in getting by getElementById: in reality, I get the DOM references element-by-element parsing the page).

The “Hello lorem ispum” and “linkety link blag” text fragments are orphaned — I cannot directly access them. I can only access the whole thing with the paragraph tag, or the inside “a” tag.

What I would like is an array of elements of the stuff in the paragraph.
If they need to get wrapping tags or something in order to get a reference to modify with JavaScript, that’s OK.
E.G., end result:

para[0] = <span>Hello lorem ispum</span>
para[1] = <a id="link" href="...">Link</a>
para[2] = <span>linkety link blag</span>

DOM Objects that I can change/access linking to what’s on the page (NOT strings).

Would it just be a bunch of parsing the paragraph tag’s innerHTML?

This is all for an open source Chrome plugin for disabilities in reading text by simply using up and down arrow keys. If you have any better ideas of how to approach this problem, please let me know!

Answer 1

You can iterate over the childNodes

   var para = document.getElementById('first');

var arr = [];

for (var i = 0; i < para.childNodes.length; i++) {
    var elem = para.childNodes[i];
    if (elem.nodeType === 3) {
        var newElem = document.createElement('span');
        newElem.className = 'a';
        newElem.innerHTML = trim(elem.nodeValue);
        elem.parentNode.insertBefore(newElem, elem.nextSibling);
        para.removeChild(elem);
        arr.push(newElem);
    }
    else {
        arr.push(elem)
    }

}
console.log(arr);

function trim(str) {
    return str.replace(/^\s+|\s+$/g, "");
}​

Check Fiddle