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修改的引用，那就没问题。 E.G.，最终结果：

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

var paragraph = document.getElementById('first'),
    list = paragraph.childNodes,
    l = list.length,
    el, container, i = 0, result = [];

for(i; i < l; i++) {
    el = list[i];
    if (el.nodeType === 3) {
        container = document.createElement('span');
        container.className = 'wrapper';
        // we want to remove line breaks from the text
        container.innerText = el.nodeValue.replace(/(\r\n|\n|\r)/gm,"");
        el = container;
    }
    result.push(el);
}

JSFiddle

我们想要从文本节点中删除换行符的原因是，这些换行符会在 时转换为。不要以为这就是你所需要的。

在您的特定情况下，result将类似于：

[SPAN，LINK，SPAN]

Answer 2

您可以遍历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

Answer 3

尝试此操作，它会创建包含文本节点内容的范围，并将其替换为文本节点

var p = document.getElementById('first');    
var elements = [];    
for (var i = 0; i < p.childNodes.length; i++) {
    var child = p.childNodes[i];
    if (child.nodeType == 3) {//text node
        if (! /^\s+$/.test(child.nodeValue)){//skip whitespaces
            var span = document.createElement('span');
            span.innerHTML = child.nodeValue;
            p.replaceChild(span, child);
            elements.push(span);
        }
    }
    else if (child.nodeType == 1){//element node
        elements.push(child)
    }
}

http://jsfiddle.net/mowglisanu/t6UaJ/

Answer 4

通过遍历标记的子节点并查看nodeType以查看哪些节点是文本节点，您可以从不在此类其他元素中的文本节点中获取文本：

var top = document.getElementById("first");
var node = top.firstChild;
while (node) {
    // get text from text nodes that aren't contained in elements
    if (node.nodeType === 3) {
        // node.nodeValue is the text in the text node
    } else if (node.nodeType === 1) {
        // node is an element here so you can get innerHTML or textContent or whatever you want
    }
    node = node.nextSibling;
}

工作演示：http://jsfiddle.net/jfriend00/YvBpw/

如果您只想要整个标签中的纯文本（包括所有元素）并通过浏览器进行操作，您可以使用：

var t = document.getElementById("first");
var text = t.textContent || t.innerText;

这将是标记中所有内容的HTML剥离文本转换。

使用子元素serparating从父标记中获取孤立文本

4 个答案: