时间戳

首页 > 解决方案 > 选择两个 array[index] 选择器之间的所有内容

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

问题描述

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

<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>

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

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

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 按它们出现的顺序，然后将目录添加到文档的开头。

  1. 我现在必须做的是选择存在于两个特定标题之间的所有内容（全部为 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])
	}
}

有谁知道解决方案？

标签： javascripthtmlcss-selectors

解决方案

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

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
}

推荐阅读