regex 将一个HTML字符串按特定的标签拆分成一个数组

6ojccjat  于 2023-10-22  发布在  其他
关注(0)|答案(5)|浏览(125)

给定这个HTML作为字符串“html”,我如何将它拆分成一个数组,其中每个头部<h标记一个元素的开始?

开始:

  1. <h1>A</h1>
  2. <h2>B</h2>
  3. <p>Foobar</p>
  4. <h3>C</h3>

结果

  1. ["<h1>A</h1>", "<h2>B</h2><p>Foobar</p>", "<h3>C</h3>"]

我尝试过的:

我想将Array.split()与正则表达式一起使用,但结果将每个<h拆分为自己的元素。我需要弄清楚如何从一个<h的开始捕获到下一个<h。然后包括第一个但排除第二个。

  1. var html = '<h1>A</h1><h2>B</h2><p>Foobar</p><h3>C</h3>';
  2. var foo = html.split(/(<h)/);

编辑:Regex不是必需的,它只是我认为以这种方式分割HTML字符串的唯一解决方案。

nwsw7zdq

nwsw7zdq1#

在您的示例中,您可以用途:

  1. /
  2. <h // Match literal <h
  3. (.) // Match any character and save in a group
  4. > // Match literal <
  5. .*? // Match any character zero or more times, non greedy
  6. <\/h // Match literal </h
  7. \1 // Match what previous grouped in (.)
  8. > // Match literal >
  9. /g
  1. var str = '<h1>A</h1><h2>B</h2><p>Foobar</p><h3>C</h3>'
  2. 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

h7appiyu

h7appiyu2#

从评论到问题,这似乎是任务:
我正在从GitHub上抓取动态markdown。然后我想把它渲染成HTML,但是把每个title元素都 Package 在一个ReactJS <WayPoint>组件中。
下面是一个完全与库无关的、基于DOM-API的解决方案。

  1. function waypointify(html) {
  2. var div = document.createElement("div"), nodes;
  3. // parse HTML and convert into an array (instead of NodeList)
  4. div.innerHTML = html;
  5. nodes = [].slice.call(div.childNodes);
  6. // add <waypoint> elements and distribute nodes by headings
  7. div.innerHTML = "";
  8. nodes.forEach(function (node) {
  9. if (!div.lastChild || /^h[1-6]$/i.test(node.nodeName)) {
  10. div.appendChild( document.createElement("waypoint") );
  11. }
  12. div.lastChild.appendChild(node);
  13. });
  14. return div.innerHTML;
  15. }

在一个现代的库中用更少的代码行做同样的事情是完全可能的,把它看作是一个挑战。
这是它使用您的示例输入生成的结果:

  1. <waypoint><h1>A</h1></waypoint>
  2. <waypoint><h2>B</h2><p>Foobar</p></waypoint>
  3. <waypoint><h3>C</h3></waypoint>
展开查看全部
pkln4tw6

pkln4tw63#

我相信有人可以减少for循环,把尖括号放回去,但这是我怎么做的。

  1. var html = '<h1>A</h1><h2>B</h2><p>Foobar</p><h3>C</h3>';
  2. //split on ><
  3. var arr = html.split(/></g);
  4. //split removes the >< so we need to determine where to put them back in.
  5. for(var i = 0; i < arr.length; i++){
  6. if(arr[i].substring(0, 1) != '<'){
  7. arr[i] = '<' + arr[i];
  8. }
  9. if(arr[i].slice(-1) != '>'){
  10. arr[i] = arr[i] + '>';
  11. }
  12. }

此外,我们实际上可以删除第一个和最后一个括号,进行拆分,然后将尖括号替换为整个内容。

  1. var html = '<h1>A</h1><h2>B</h2><p>Foobar</p><h3>C</h3>';
  2. //remove first and last characters
  3. html = html.substring(1, html.length-1);
  4. //do the split on ><
  5. var arr = html.split(/></g);
  6. //add the brackets back in
  7. for(var i = 0; i < arr.length; i++){
  8. arr[i] = '<' + arr[i] + '>';
  9. }

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

展开查看全部
4smxwvx5

4smxwvx54#

我用这个函数来转换HTML字符串DOM数组

  1. static getArrayTagsHtmlString(str){
  2. let htmlSplit = str.split(">")
  3. let arrayElements = []
  4. let nodeElement =""
  5. htmlSplit.forEach((element)=>{
  6. if (element.includes("<")) {
  7. nodeElement = element+">"
  8. }else{
  9. nodeElement = element
  10. }
  11. arrayElements.push(nodeElement)
  12. })
  13. return arrayElements
  14. }

快乐密码

展开查看全部
dhxwm5r4

dhxwm5r45#

我刚刚遇到了这个问题,在我的一个项目中需要同样的东西。执行了以下操作,并对所有HTML字符串都有效。

  1. let splitArray = data.split("><")
  2. splitArray.forEach((item, index) => {
  3. if (index === 0) {
  4. splitArray[index] = item += ">"
  5. return
  6. }
  7. if (index === splitArray.length - 1) {
  8. splitArray[index] = "<" + item
  9. return
  10. }
  11. splitArray[index] = "<" + item + ">"
  12. })
  13. console.log(splitArray)

其中data是HTML字符串

展开查看全部

相关问题