Question

如何在有序的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>

这是所需的输出：

<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>

请注意，第一行之前没有<br>标记（这是动态生成的内容。）

Answer 1

var content = $('.Container').html().split('<br>');
$('.Container').empty().append('<ul>');
for (var i = 0; i < content.length; i++) {
    $('.Container ul').append('<li>' + content[i] + '</li>')
}

<强> jsFiddle example

产地：

<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>

Answer 2

通过执行以下操作从Container元素中抓取html：

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

接下来，取出该字符串并将其拆分为＆＃39; <br>＆＃39;它给你一个数组。

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

最后，通过循环遍历数组来重新创建容器内容：

var newContainerHtml = '<ol>';

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

newContainerHtml += '</ol>';

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

这样的事情应该有效，这个问题有更优雅的解决方案，但这是我认为最明显的解决方案。

Answer 3

为了扩展知识，您还可以使用regexp和jQuery的HTML处理，只需一次点击。

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

这也考虑到没有换行但只有一行的特殊情况。

更新：JSFiddle为方便起见：http://jsfiddle.net/ckLZV/

第二次更新：我做了一个愚蠢的假设，你会使用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>'
}

各自的JSFiddle：http://jsfiddle.net/tfE5X/1/

如何使用jquery在一个有序的html列表中转换用BR标签划分的多行文本？

3 个答案: