假设有一个表示HTML的字符串"html"，我该如何将其拆分为一个数组，其中每个标题<h都标记了一个元素的开头？
从这里开始：
<h1>A</h1>
<h2>B</h2>
<p>Foobar</p>
<h3>C</h3>
结果：
["<h1>A</h1>", "<h2>B</h2><p>Foobar</p>", "<h3>C</h3>"]
我尝试过的方法：
我想使用带有正则表达式的Array.split（），但结果将每个<h都拆分成自己的元素。 我需要找出如何从一个<h的开头捕获到下一个<h。 然后包括第一个但不包括第二个。
var html = '<h1>A</h1><h2>B</h2><p>Foobar</p><h3>C</h3>';
var foo = html.split(/(<h)/);
编辑: 正则表达式并不是必需的，它只是我认为可以通用地分割HTML字符串的唯一解决方案。
在你的例子中，你可以使用：
/
<h // Match literal <h
(.) // Match any character and save in a group
> // Match literal <
.*? // Match any character zero or more times, non greedy
<\/h // Match literal </h
\1 // Match what previous grouped in (.)
> // Match literal >
/g
var str = '<h1>A</h1><h2>B</h2><p>Foobar</p><h3>C</h3>'
str.match(/<h(.)>.*?<\/h\1>/g); // ["<h1>A</h1>", "<h2>B</h2>", "<h3>C</h3>"]
但是请不要使用正则表达式来解析HTML，可以阅读正则表达式匹配除了XHTML自包含标签之外的其他开放标签
我正在收集来自GitHub的动态markdown。然后我想将其渲染为HTML，但要将每个标题元素包装在ReactJS的
<WayPoint>组件中。
以下是完全独立于库的、基于DOM-API的解决方案。
function waypointify(html) {
var div = document.createElement("div"), nodes;
// parse HTML and convert into an array (instead of NodeList)
div.innerHTML = html;
nodes = [].slice.call(div.childNodes);
// add <waypoint> elements and distribute nodes by headings
div.innerHTML = "";
nodes.forEach(function (node) {
if (!div.lastChild || /^h[1-6]$/i.test(node.nodeName)) {
div.appendChild( document.createElement("waypoint") );
}
div.lastChild.appendChild(node);
});
return div.innerHTML;
}
用更少的代码在现代库中完成相同的操作是完全可能的，把它看作一种挑战。
这是使用您的示例输入所产生的结果：
<waypoint><h1>A</h1></waypoint>
<waypoint><h2>B</h2><p>Foobar</p></waypoint>
<waypoint><h3>C</h3></waypoint>
我相信有人可以简化for循环来放回尖括号，但这是我会做的方式。
var html = '<h1>A</h1><h2>B</h2><p>Foobar</p><h3>C</h3>';
//split on ><
var arr = html.split(/></g);
//split removes the >< so we need to determine where to put them back in.
for(var i = 0; i < arr.length; i++){
if(arr[i].substring(0, 1) != '<'){
arr[i] = '<' + arr[i];
}
if(arr[i].slice(-1) != '>'){
arr[i] = arr[i] + '>';
}
}
var html = '<h1>A</h1><h2>B</h2><p>Foobar</p><h3>C</h3>';
//remove first and last characters
html = html.substring(1, html.length-1);
//do the split on ><
var arr = html.split(/></g);
//add the brackets back in
for(var i = 0; i < arr.length; i++){
arr[i] = '<' + arr[i] + '>';
}
当然，对于没有内容的元素，这将失败。
let splitArray = data.split("><")
splitArray.forEach((item, index) => {
if (index === 0) {
splitArray[index] = item += ">"
return
}
if (index === splitArray.length - 1) {
splitArray[index] = "<" + item
return
}
splitArray[index] = "<" + item + ">"
})
console.log(splitArray)
你好，我使用了这个函数将HTML字符串DOM转换为数组
static getArrayTagsHtmlString(str){
let htmlSplit = str.split(">")
let arrayElements = []
let nodeElement =""
htmlSplit.forEach((element)=>{
if (element.includes("<")) {
nodeElement = element+">"
}else{
nodeElement = element
}
arrayElements.push(nodeElement)
})
return arrayElements
}
编程快乐
document.createDocumentFragment()。 - Andreas Louv