Javascript 动态分组没有ID的结构不良的HTML？

有一个非常旧的网站，我使用的数据并没有显示在一个友好的方式。我想写一个用户脚本（javascript/jQuery）来帮助这个站点的可读性。内容如下（HTML注释是我自己的，以帮助显示）：

名称1（位置1）-日期1：


文本1


正文1（续）


正文1（续）




名称2（位置2）-日期2：


文本2


正文2（续）




正文2（续）


正文2（续）




名称3（位置3）-日期3：


文本3


文本3（续）


文本3（续）






文本3（续）


文本3（续）
名称1（位置1）-日期1：


文本1


正文1（续）


正文1（续）




名字4。。。
......

• 姓名示例：

  Bob Dole

  ，

  SMITH，JOHN

• 位置示例：

  通过网络

  ，

  内部

• 日期示例：

  2011年7月25日-美国东部夏令时1317日

  ，

  2011年12月30日-美国东部夏令时1411日

• Text1/Text2/etc示例：

  Blah Blah*（测试）文本放在这里-谢谢这里：那里

如您所见，两个

始终位于下一个“条目”（名称、位置、日期）之前，但由于文本是自由文本，因此它也可以包含各种

，包括两个或多个。另一个问题是文本是否也包含从其他地方粘贴的

Name（Location）-Date

所以，如果我想写一个脚本，可以添加到Google Chrome上，它说添加了一个按钮，可以折叠（或者，如果已经折叠，则取消折叠）每个条目，这是可能的吗？我遇到的问题是，由于没有唯一的元素开始或结束一个条目，我不知道如何开始

一般的概念是循环遍历每个“条目”（标题是名称/位置/日期）和随后的文本，直到下一个标题），并允许每个“条目”可折叠（例如Reddit注释可折叠）

---

或者对于一个更简单的概念，如果我想用红色字体标记其他条目，该怎么办？因此，所有entry1都将是黑色字体，entry2将是红色字体，entry3将是黑色字体，entry4将是红色字体，依此类推。

您必须了解如何搜索DOM以找到所需的元素。例如，您可以按标记名查找内容，然后检查给定标记周围的上下文，以确定它是否是您要查找的内容

如果您提供更多关于您要查找的内容的信息，我们可能会提供更具体的代码

例如，

document.getElementsByTagName（“br”）

查找文档中的所有

标记。您可以检查每个标签以查找双

标签，如果您正试图查找双

标签，或者如果您正在查找双

标签之前或之后的特定文本，您也可以查找。正如我在评论中所说的，在给出更具体的代码之前，您需要更具体地了解您实际寻找的模式

例如，以下是如何搜索文档中

标记后面的特定文本模式：

var items = document.getElementsByTagName("br");
// modify this regex to suit what you're trying to match
var re = /\w+\s\(\w+\)/;
for (var i = 0, len = items.length; i < len; i++) {
    var node = items[i];
    while ((node = node.nextSibling) && node.nodeType == 3) {
        if (re.test(node.nodeValue)) {
            // add a marker test node (just for test purposes)
            var span = document.createElement("span");
            span.className = "marker";
            span.innerHTML = "X";
            node.parentNode.insertBefore(span, node.nextSibling);
        }            
    }        
}​

var items=document.getElementsByTagName（“br”）；
//修改此正则表达式以适合您试图匹配的内容
变量re=/\w+\s\（\w+\）/；
对于（变量i=0，len=items.length；i

您可以将正则表达式修改为您希望搜索查找的任何内容

您可以在此处看到一个工作演示：

---

好的，这里还有一个机会来猜测您使用正则表达式寻找的模式。这将查找两个连续的

标记，后跟与模式匹配的文本。然后它将该文本包装成一个跨度，以便可以根据偶数或奇数设置样式

function getTextAfter(node) {
    // collect text from successive text nodes
    var txt = "";
    while ((node = node.nextSibling) && node.nodeType == 3) {
           txt += node.nodeValue;
    }
    return(txt);    
}

function wrapTextInSpan(preNode, cls) {
    // collect successive text nodes
    // into a span tag
    var node = preNode, item;
    var span = document.createElement("span");
    span.className = cls;
    node = node.nextSibling;
    while (node && node.nodeType == 3) {
        item = node;
        node = node.nextSibling;
        span.appendChild(item);
    }
    preNode.parentNode.insertBefore(span, preNode.nextSibling);
    return(span);
}

// find double br tags
var items = document.getElementsByTagName("br");
var cnt = 1;
var re = /\w+\s+\([^)]+\)\s+-\s+(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)\s+\d+,\s+\d+\d+/i;
for (var i = 0, len = items.length; i < len; i++) {
    var node = items[i];
    // collect text from successive text nodes
    var txt = "";
    while ((node = node.nextSibling) && node.nodeType == 3) {
           txt += node.nodeValue;
    }
    // if no text, check for successive BR tags
    if (txt.replace(/\n|\s/g, "") == "") {
        if (i + 1 < len && node === items[i + 1]) {
            // found a double BR tag
            // get the text after it
            txt = getTextAfter(node);
            if (re.test(txt)) {
                wrapTextInSpan(node, "marker" + (cnt % 2 ? "Odd" : "Even"));
                ++cnt;
            }
            ++i;
        }
    }
}
​

函数getTextAfter（节点）{ //从连续的文本节点收集文本 var txt=“”； while（（node=node.nextSibling）和&node.nodeType==3）{ txt+=node.nodeValue； } 返回（txt）； } 函数wrapTextInSpan（前节点，cls）{ //收集连续的文本节点 //变成一个跨度标签 变量节点=前节点，项目； var span=document.createElement（“span”）； span.className=cls； node=node.nextSibling； while（node&&node.nodeType==3）{ 项目=节点； node=node.nextSibling； span.追加子项（项目）； } preNode.parentNode.insertBefore（span，preNode.nextSibling）； 返回（span）； } //查找双br标记 var items=document.getElementsByTagName（“br”）； var-cnt=1； var re=/\w+\s+\（[^）]+\）\s+-\s+（一月、二月、三月、四月、五月、六月、七月、八月、九月、十月、十一月、十二月）s+\d+、\s+\d+/i； 对于（变量i=0，len=items.length；i 在此进行工作演示：

---

这里还有一个版本

function getTextAfter(node) {
    // collect text from successive text nodes
    var txt = "";
    while ((node = node.nextSibling) && node.nodeType == 3) {
           txt += node.nodeValue;
    }
    return(txt);    
}

function wrapTextInSpan(preNode, cls) {
    // collect successive text nodes
    // into a span tag
    var node = preNode, item;
    var span = document.createElement("span");
    span.className = cls;
    node = node.nextSibling;
    while (node && node.nodeType == 3) {
        item = node;
        node = node.nextSibling;
        span.appendChild(item);
    }
    preNode.parentNode.insertBefore(span, preNode.nextSibling);
    return(span);
}

// find double br tags
var items = document.getElementsByTagName("br");
var cnt = 1;
var re = /\w+\s+\([^)]+\)\s+-\s+(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)\s+\d+,\s+\d+\d+/i;
for (var i = 0, len = items.length; i < len; i++) {
    var node = items[i];
    // collect text from successive text nodes
    var txt = "";
    while ((node = node.nextSibling) && node.nodeType == 3) {
           txt += node.nodeValue;
    }
    // if no text, check for successive BR tags
    if (txt.replace(/\n|\s/g, "") == "") {
        if (i + 1 < len && node === items[i + 1]) {
            // found a double BR tag
            // get the text after it
            txt = getTextAfter(node);
            if (re.test(txt)) {
                wrapTextInSpan(node, "marker" + (cnt % 2 ? "Odd" : "Even"));
                ++cnt;
            }
            ++i;
        }
    }
}
​

function getTextAfter(node) {
    // collect text from successive text nodes
    var txt = "";
    while ((node = node.nextSibling) && node.nodeType == 3) {
           txt += node.nodeValue;
    }
    return(txt);    
}

function wrapTextInSpan(preNode, cls) {
    // collect successive text nodes
    // into a span tag
    var node = preNode, item;
    var span = document.createElement("span");
    span.className = cls;
    node = node.nextSibling;
    while (node && node.nodeType == 3) {
        item = node;
        node = node.nextSibling;
        span.appendChild(item);
    }
    preNode.parentNode.insertBefore(span, preNode.nextSibling);
    return(span);
}

function wrapBetweenInSpan(preNode, postNode, cls) {
    var node = preNode, item;
    var span = document.createElement("span");
    span.className = cls;
    node = node.nextSibling;
    if (node && node.nodeType == 1 && node.tagName == "BR") {
        preNode = node;
        node = node.nextSibling;
    }
    while (node && node != postNode) {
        item = node;
        node = node.nextSibling;
        span.appendChild(item);
    }
    preNode.parentNode.insertBefore(span, preNode.nextSibling);
    return(span);
}

function toggleClass(el, cls) {
    var str = " " + el.className + " ";
    if (str.indexOf(" " + cls + " ") >= 0) {
        str = str.replace(cls, "").replace(/\s+/, " ").replace(/^\s+|\s+%/, "");
        el.className = str;
    } else {
        el.className = el.className + " " + cls;
    }
}

function hasClass(el, cls) {
    var str = " " + el.className + " ";
    return(str.indexOf(" " + cls + " ") >= 0);    
}

function addButton(target) {
    var span = document.createElement("span");
    span.className = "expandoButton";
    span.innerHTML = "+++";
    span.onclick = function(e) {
        var expando = this;
        do {
            expando = expando.nextSibling;
        } while (expando && !hasClass(expando, "markerContents"));
        toggleClass(expando, "notshown");
    };
    target.parentNode.insertBefore(span, target.nextSibling);
}

// find double br tags
var items = document.getElementsByTagName("br");
var cnt = 1;
var spans = [];
var re = /\w+\s+\([^)]+\)\s+-\s+(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)\s+\d+,\s+\d+\d+/i;
for (var i = 0, len = items.length; i < len; i++) {
    var node = items[i];
    // collect text from successive text nodes
    var txt = "";
    while ((node = node.nextSibling) && node.nodeType == 3) {
           txt += node.nodeValue;
    }
    // if no text, check for successive BR tags
    if (txt.replace(/\n|\s/g, "") == "") {
        if (i + 1 < len && node === items[i + 1]) {
            // found a double BR tag
            // get the text after it
            txt = getTextAfter(node);
            if (re.test(txt)) {
                var span = wrapTextInSpan(node, "marker marker" + (cnt % 2 ? "Odd" : "Even"));
                spans.push(span);
                ++cnt;
            }
            ++i;
        }
    }
}

// now wrap the contents of each marker
for (i = 0, len = spans.length; i < len; i++) {
    wrapBetweenInSpan(spans[i], spans[i+1], "markerContents shown");
    addButton(spans[i]);
}
​

window.onload = function() {
    var fontTags = document.getElementsByTagName("font"),
        i, j = 0;

    for (i = 0; i < fontTags.length; i++)
        fontTags[i].innerHTML = '<div class="entry odd">' +
            fontTags[i].innerHTML.replace(/<br>\s*?<br>/g, function() {
            return '</div><div class="entry ' + (j++ %2===0?'even':'odd') + '">';
        }) + '</div>';
};

div.odd { color : red; }