选择两个 array[index] 选择器之间的所有内容答案

【问题标题】：Select everything between two array[index] selectors选择两个 array[index] 选择器之间的所有内容
【发布时间】：2020-01-15 05:56:00
【问题描述】：

我正在使用以这种方式设置的网页构建在线课程：

<h1>Chapter 1</h1>
<p>Welcome to the chapter 1 overview.</p>
<h2>Unit A</h2>
<p>This is the first unit of the first chapter.</p>
<h1>Chapter 2</h1>
<p>This is the chapter 2 overview</p>

为了自动完成将这些网页转换为在线课程的任务，我需要做两件事：

选择所有标题并确定它们的顺序/层次，如下所示：

document.body.innerHTML = "<div align='left' id='mySpecial'></div>" + document.body.innerHTML;
myHeadings = document.querySelectorAll("h1, h2, h3, h4");
for(var i=0; i<=myHeadings.length-1; i++){
	if (myHeadings[i].outerHTML.includes('h1') == true){
		document.getElementById('mySpecial').innerHTML += '<br>>H1: '+myHeadings[i].innerText
	}
	if (myHeadings[i].outerHTML.includes('h2') == true){
		document.getElementById('mySpecial').innerHTML += '<br>>-->H2: '+myHeadings[i].innerText;
	}
	if (myHeadings[i].outerHTML.includes('h3') == true){
		document.getElementById('mySpecial').innerHTML += '<br>>-->-->H3: '+myHeadings[i].innerText;
	}
}

上面的脚本创建了一个数组，其中包含每个 H1、H2 和 H3 按它们出现的顺序，然后在文档的开头添加一个目录。

我现在必须做的是选择存在于两个特定标题之间的所有内容（全部为 innerHTML）。例如;我知道第一个标题的相应内容包括 myHeadings[0] 和 myHeadings[1] 之间的所有 html 等等。当使用这样的数组 [索引] 类型选择器时，我还没有找到一种方法来选择两个选择器之间的所有内容。请参阅下面的伪代码和 EVERYTHING_BETWEEN() 函数，该函数理论上返回两个 array[index] 选择器之间的所有 HTML。

document.body.innerHTML = "<div align='left' id='mySpecial'></div>" + document.body.innerHTML;
myHeadings = document.querySelectorAll("h1, h2, h3, h4");
for(var i=0; i<=myHeadings.length-1; i++){
	if (myHeadings[i].outerHTML.includes('h1') == true){
		document.getElementById('mySpecial').innerHTML += '<br>>H1: '+myHeadings[i].innerText
        document.getElementById('mySpecial').innerHTML += EVERYTHING_BETWEEN(myHeadings[i], myHeadings[i+1])
	}
	if (myHeadings[i].outerHTML.includes('h2') == true){
		document.getElementById('mySpecial').innerHTML += '<br>>-->H2: '+myHeadings[i].innerText;
        document.getElementById('mySpecial').innerHTML += EVERYTHING_BETWEEN(myHeadings[i], myHeadings[i+1])
	}
	if (myHeadings[i].outerHTML.includes('h3') == true){
		document.getElementById('mySpecial').innerHTML += '<br>>-->-->H3: '+myHeadings[i].innerText;
        document.getElementById('mySpecial').innerHTML += EVERYTHING_BETWEEN(myHeadings[i], myHeadings[i+1])
	}
}

有人知道解决方案吗？

【问题讨论】：

最小可读示例
stackoverflow.com/questions/2698259/… 这使用 jquery 但也许可以告诉你方法
在谷歌的帮助下我找到了这个vanillajstoolkit.com/helpers/nextuntil
感谢 A. Meshu。我见过 nextUntil() 但它似乎不支持 array[index] 样式的选择器。例如这应该工作： var elems = $('h2').nextUntil('h2');但是，这似乎不起作用： var elems = $(myHeadings[1]).nextUntil(myHeadings[2]);

标签： javascript html css-selectors

【解决方案1】：

假设您的所有标题都具有相同的父元素（它们在您的示例中这样做），此功能将起作用：

function EVERYTHING_BETWEEN (el1, el2) {
    var siblings = Array.from(el1.parentNode.children); // get an array of all siblings
    var between =  siblings.slice(siblings.indexOf(el1) + 1, siblings.indexOf(el2)); // get the subarray of elements between
    return between.map(v => v.outerHTML).join(""); // replace each with their outerHTML and join
}

【讨论】：