0

我有一个编程挑战，我想知道最没有错误的方法是什么。

基本上，我有以下 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 进行修改的引用，那没关系。EG，最终结果：

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 插件，通过简单地使用向上和向下箭头键来阅读文本的障碍。如果您对如何解决此问题有任何更好的想法，请告诉我！

4

4 回答 4

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

我们要从文本节点中删除换行符的原因是这些将被转换为<br>when in a <span>。不要认为这是你需要的。

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

[跨度，链接，跨度]

于 2012-11-30T22:02:56.270 回答
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, "");
}​

检查小提琴

于 2012-11-30T22:05:16.563 回答
1

试试这个，它使用文本节点的内容创建一个跨度并将其替换为文本节点

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/

于 2012-11-30T22:39:39.283 回答
0

您可以通过遍历<p>标记的子节点并查看 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/

如果您只想要整个<p>标签（包括所有元素）的纯文本并跨浏览器进行操作，您可以使用以下命令：

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

这将是<p>标签中所有内容的 HTML 剥离文本转换。

于 2012-11-30T22:02:58.060 回答