如何在 JavaScript 中将逗号分隔的列表转换为 <ul> 列表？答案

【问题标题】：How do I convert a comma separated list into a <ul>list in JavaScript?如何在 JavaScript 中将逗号分隔的列表转换为 <ul> 列表？
【发布时间】：2015-03-24 21:13:34
【问题描述】：

我正在尝试将逗号分隔的列表转换为

HTML

<div class="fruit">apple,banana,melon</div>

JS

$('.fruit').each(function(){
    var txt = $(this).text();
    $(this).html(txt.replace(/,/g,'</li><li>'));
}).wrapInner('<ul><li></li></ul>');

我期待...

<div class="fruit">
    <ul>
        <li>apple</li>
        <li>banana</li>
        <li>melon</li>
    </ul>
</div>

但是，结果是……

<div class="fruit">
    <ul>
        <li>apple
        <li>banana</li>
        <li>melon</li>
        </li>
    </ul>
</div>

为什么“apple”和“banana”之间的第一个逗号只替换为“

”，而缺少的“

”移到了“melon”后面的最后一个逗号？

或者，我应该使用 split() 和 join() 等其他方法来获得正确的结果吗？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

这是一种方法：

$('.fruit').html(function(_, oldHTML) {
   return '<ul><li>' + oldHTML.split(',').join('</li><li>') + '</li></ul>';
});

【讨论】：

【解决方案2】：

请参考pen

<div class="fruits">apple,banana,melon</div>



var fruitsNode = document.querySelector('.fruits');
var fruits = fruitsNode.innerHTML.split(',');

var fruitsHTML = [];
fruits.forEach(function(fruit){
  fruitsHTML.push('<li>' + fruit + '</li>');
});

fruitsNode.innerHTML = fruitsHTML.join('');

【讨论】：

【解决方案3】：

因为您将wrapInner 应用于each。你的正则表达式没问题。

要修复它，请将wrapInner 应用于html：

    $('.fruit').each(function(){
        var txt = $(this).text();
        $(this).html(txt.replace(/,/g,'</li><li>')).wrapInner('<ul><li></li></ul>');
    });

但是您传递给wrapInner 的内容是无效的html。这不会破坏事情，但我更喜欢这样更干净的东西：

$('.fruit').each(function(){
    var txt = $(this).text();
    $(this).html('<ul><li>' + txt.replace(/,/g,'</li><li>') + '</li></ul>');});

【讨论】：

OP，您不能分两步添加标记，因为浏览器会在第一步之后尝试填充缺失的标记（有关更多详细信息，请参阅 Bergi 的回答）。保罗是对的。这是一个显示结果的小提琴：jsfiddle.net/chd41uef

【解决方案4】：

为什么"apple" 和"banana" 之间的第一个逗号只替换为<li>，而缺少的</li> 移动到最后一个，在"melon" 后面？

不是。这只是您创建的无效 html 的结果：

apple</li><li>banana</li><li>melon

解析成

apple<li>banana</li><li>melon</li>

当您使用.html() 时。这被.wrapInner 包装到<ul><li>…</li></ul> 中——这会导致无效的DOM 带有嵌套的<li> 标签。

我应该使用 split() 和 join() 等其他方法来获得正确的结果吗？

是的。我会推荐

$('.fruit').contents().replaceWith(function(){
    return $('<ul>').append($(this.data.split(",")).map(function() {
        return $('<li>').text(this).get();
    }));
})

【讨论】：

这肯定是我机器上 Chrome 中正在发生的事情。

【解决方案5】：

如果您只想这样做，请使用简单（未经测试）的单行代码，例如 '<ul><li>' + document.getElementsByClassName("fruit")[0].textContent.replace(',', '</li><li>') + '</li></ul>'。

另一方面，如果您想在不同的地方重用它（动态类名、元素类型等），那么您需要重构为适当的方法。

【讨论】：

【解决方案6】：

我推荐 Vohuman 的方法。这只是另一种方式......不太方便，但仍然是一种选择。

var getContent = $('.fruit').html().split(',');
var list = '<ul>';
$(getContent ).each(function(key,value){
    list += '<li>'+ value +'</li>';
    }

list += '</ul>'; //list now contains a complete list.

【讨论】：