有没有办法将两个或多个连续 div 标签中的第一个转换为 span 标签答案

【问题标题】：Is there a way to convert the first of two or more consecutive div tags to a span tag有没有办法将两个或多个连续 div 标签中的第一个转换为 span 标签
【发布时间】：2020-08-11 06:11:43
【问题描述】：

我正在尝试将 HTML 中任何连续 div 的第一个 div 转换为跨度。下面是一个例子

<div><div>Hello</div></div>

所需的输出应该是

<span><div>Hello</div></span>

我想要实现的事情是编写一个函数，它接收 HTML 正文，然后返回格式化的 HTML 正文，其中 span 替换必要的 div

【问题讨论】：

如果有
Hello
怎么办？
您可以将两个或多个中的第一个<div> 与(?<!<div>)<div>(?=<div>) 匹配，其中(?<!<div>) 是负向后视，(?=<div>) 是正向前瞻.
您能进一步解释一下吗？大概举个例子吧。对于这种情况，尽管所有只有一个 div 应该保留，其余的都变成跨度

标签： javascript regex string

【解决方案1】：

将其用作捕获 div 之间的文本的模式文本。

<div>(.*)<\/div>

将其用作替换文本

<span>$1</span>

您可以在这里查看 - https://regex101.com/r/02Rqj6/2

【讨论】：

您能进一步解释一下您的意思吗？
我提到的第一个正则表达式用于匹配您正在寻找的模式，然后一旦找到匹配项并捕获组，我们使用第二个文本并使用 $1 在跨度标签之间引用捕获的组
不客气。您可以接受答案并投票。
这可以扩展到
Hello
的情况，所有的 div 都变成 span，除了一个吗？
(?<=<div>)(<div>(?!<div>)([\w<>].*?)<\/div>)(?=<\/div>) - 你可以试试这个。但是由于它是从最内部的匹配开始的，所以它只会有一个匹配。确保循环遍历相同的文本，直到没有匹配项。每次你匹配替换文本可以是<span>$2</span>

【解决方案2】：

因此，以下代码适用于您给出的示例。这里的假设是<div><div><div>Hello</div></div></div> 将变为<span><div><div>Hello</div></div></span>

  var divs = document.querySelectorAll("div");
  console.log(divs.length)
  divs.forEach(function(item,index){
    
  //the div should be the only child node if it's nested like this
   if(item.childNodes.length == 1 && item.childNodes[0].nodeName == "DIV")      
    {
     var span = document.createElement("SPAN");
     span.innerHTML = item.innerHTML; 
     item.parentNode.replaceChild(span, item);
    }
  })

小提琴：https://jsfiddle.net/txe48w5m/

【讨论】：

我想写一个函数来接收 HTML 正文，然后返回格式化的 HTML 正文，用 span 替换必要的 div