解析UL LI列表以逗号分隔的值

Question

I need your help,

As it is right now, my function spits out my UL LI list as the below:

Coffee ,Tea ,Milk

I need to get it into the format of:

Coffee,Tea,Milk

Why does it add the extra spaces?

function items_2_var() {

    var x = document.getElementById("list1").getElementsByTagName("li")

    var values = []

    for(var i=0;i < x.length; i++) {

        if (x[i].innerText.length) { values.push(x[i].innerText) }
    }

    alert(values.join(","))

}

HTML:

<div id="list1">
    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>
</div>

Answer 1

The only way I can reproduce the problem you describe is if you actually end up with an HTML rendered as so:

<div id="list1">
    <ul>
      <li>Coffee&nbsp;&nbsp;&nbsp;&nbsp;</li>
      <li>Tea&nbsp;&nbsp;</li>
      <li>Milk&nbsp;&nbsp;&nbsp;</li>
    </ul>
</div>

In that case, yo do see the space when you join the strings. However, this is easy to fix by using the following instead: values.push((x[i].innerText.replace(/\\s/g,''))

Code:

function items_2_var() {
    var x = document.getElementById("list1").getElementsByTagName("li");
    var values = [];
    for(var i=0;i < x.length; i++) {
        if (x[i].innerText.length) { values.push((x[i].innerText.replace(/\s/g,''))); }
    }
    alert(values.join(","));
}

Full demo here.