如何使用jquery转换有序html列表中用BR标记分隔的多行文本？

如何转换有序html列表中用BR标记分隔的多行文本

这是html源代码：

<div class="Container">
Lorem ipsum dolor sit amet, consectetur adipisci
<br>
ng elit. Curabitur vulputate, est nec iaculis lobortis, libero v
<br>
elit pharetra nulla, eget tristique felis lacus ac orci. Vivamus ut
<br>
accumsan leo. Vestibulum ac velit adipiscing, tempor purus
<br>
quis, condimentum lectus. Morbi m
<br>
alesuada, lectus non gravida pretium,
</div>

Lorem ipsum dolor sit amet，Concertetur adipisci


吴精英。库拉比图尔·瓦普塔特（Curabitur vulputate），最新研究报告，自由五世（libero v


Elite pharetra nulla，eget tristique felis lacus ac orci。维瓦姆斯大学


accumsan狮子座。颞腹前庭


奎斯，调味品。莫比m


阿莱苏阿达，莱克图斯非孕期前，

这是所需的输出：

<div class ="Container">

<ol>

<li>Lorem ipsum dolor sit amet, consectetur adipisci</li>

<li>ng elit. Curabitur vulputate, est nec iaculis lobortis, libero </li>

<li>elit pharetra nulla, eget tristique felis lacus ac orci. Vivamus ut</li>

<li>accumsan leo. Vestibulum ac velit adipiscing, tempor purus</li>

<li> quis, condimentum lectus. Morbi m</li>

<li>alesuada, lectus non gravida pretium,</li>

</ol>

</div>

Lorem ipsum dolor sit amet，Concertetur adipisci
吴精英。自由女神乌尔普塔特
Elite pharetra nulla，eget tristique felis lacus ac orci。维瓦姆斯大学
accumsan狮子座。颞腹前庭
奎斯，调味品。莫比m
阿莱苏阿达，莱克图斯非孕期前

请注意，第一行前面没有

标记（这是动态生成的内容）。

var content=$（'.Container'）.html（）.split（'
'）；
$（'.Container'）.empty（）.append（'
'）；
对于（变量i=0；i'+content[i]+''））
}

产生：

<div class="Container">
    <ul>
        <li>Lorem ipsum dolor sit amet, consectetur adipisci</li>
        <li>ng elit. Curabitur vulputate, est nec iaculis lobortis, libero v</li>
        <li>elit pharetra nulla, eget tristique felis lacus ac orci. Vivamus ut</li>
        <li>accumsan leo. Vestibulum ac velit adipiscing, tempor purus</li>
        <li>quis, condimentum lectus. Morbi m</li>
        <li>alesuada, lectus non gravida pretium,</li>
    </ul>
</div>

Lorem ipsum dolor sit amet，Concertetur adipisci
吴精英。库拉比图尔·瓦普塔特（Curabitur vulputate），最新研究报告，自由五世（libero v
Elite pharetra nulla，eget tristique felis lacus ac orci。维瓦姆斯大学
accumsan狮子座。颞腹前庭
奎斯，调味品。莫比m
阿莱苏阿达，莱克图斯非孕期前

执行以下操作，从容器元素中获取html：

var containerHtml = $('.container').html();

接下来，获取该字符串并在“

”上拆分它，这将为您提供一个数组

var containerHtmlArray = containerHtml.split('<br>');

var containerhtmlaray=containerHtml.split（“
”）； 最后，通过在数组中循环来重新创建容器内容：

var newContainerHtml = '<ol>';

for (var i = 0; i < containerHtmlArray.length-1; i++) {
    newContainerHtml += '<li>'+ containerHtmlArray[i] + '</li>';
}

newContainerHtml += '</ol>';

$('.container').html(newContainerHtml);

var newContainerHtml=''；
对于（变量i=0；i'；
}
newContainerHtml+=''；
$（'.container'）.html（newContainerHtml）；

---

类似这样的方法应该会奏效，对于这个问题有更优雅的解决方案，但我相信这是最明显的解决方案。

为了扩展知识，您还可以使用regexp和jQuery的HTML处理，一次成功

$('.Container').html('<ol><li>' + $('.Container').html().replace(/<br( \/)?>/g, '</li><li>') + '</li></ol>');

$（'.Container'）.html（'
'+$（'.Container'）.html（）.replace（//g'
'））+'
'）；

这还考虑了没有换行，但只有一行的特殊情况

更新：JSFiddle为方便起见：

第二个更新：我愚蠢地假设您将使用jQuery。这是一个纯JS版本：

var containers = document.getElementsByClassName('Container');

for (var i = 0 ; i < containers.length; i++) {
  containers[i].innerHTML = '<ol><li>' + containers[i].innerHTML.toString().replace(/<br.*?>/ig, '</li><li>') + '</li></ol>'
}

var containers=document.getElementsByClassName（'Container'）；
对于（var i=0；i
'）+'
'
}

---

和相应的JSFIDLE:

那么你在寻找什么，一个JavaScript解决方案？是的，标题编辑，谢谢。谢谢，工作得很好。这使得假设使用了jQuery，这在最初的问题中没有定义。请参阅我的答案，以获得不带jQuery的答案。

var containers = document.getElementsByClassName('Container');

for (var i = 0 ; i < containers.length; i++) {
  containers[i].innerHTML = '<ol><li>' + containers[i].innerHTML.toString().replace(/<br.*?>/ig, '</li><li>') + '</li></ol>'
}