javascript - 从父标签中获取孤立文本，并分 ionic 元素

Question

我遇到了编程挑战，我想知道解决这个问题最无错误的方法是什么。

基本上，我有以下 HMTL:

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

(id 用于通过 getElementById 获取概念证明:实际上，我通过逐个元素解析页面来获取 DOM 引用)。

“Hello lorem ispum”和“linkety link blag”文本片段是孤立的——我无法直接访问它们。我只能使用段落标签或内部“a”标签访问整个内容。

我想要的是段落中内容的元素数组。如果他们需要获取包装标签或其他内容才能获得使用 JavaScript 进行修改的引用，那也没关系。例如，最终结果:

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

我可以更改/访问链接到页面上内容的 DOM 对象(不是字符串)。

这只是一堆解析段落标签的innerHTML吗？

这一切都是为了一个开源 Chrome 插件，旨在帮助那些无法通过简单地使用向上和向下箭头键来阅读文本的人。如果您对如何解决这个问题有更好的想法，请告诉我!

Answer 1

您可以迭代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