Question

将此HTML作为字符串＆＃34; html＆＃34;，如何将其拆分为数组，其中每个标题<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字符串的唯一解决方案。

Answer 1

在您的示例中，您可以使用：

/
  <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>"]

但请不要使用regexp解析HTML，请阅读RegEx match open tags except XHTML self-contained tags

Answer 2

从评论到问题，这似乎是任务：

我正在从GitHub抓取动态降价。然后我想将它呈现为HTML，但将每个title元素包装在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>

Answer 3

我确定有人可以减少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] + '>';
}

哦，当然，对于没有内容的元素，这会失败。

Answer 4

嗨，我使用此函数来转换数组中的html String 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
  }

快乐代码

通过特定标记将HTML字符串拆分为数组

4 个答案: