How to remove unwanted character in HTML jQuery JavaScript

Question

I am trying to remove these "," from my HTML. I have tried .replace(",", "") , .join() and other methods but to no success.

Here is what it looks like in the console and on my page, notice the commas:

Here is my code:

        var featuresArray = jQuery(".Features").siblings().children("p").text().replace(",", "").split("\n");

        var boom =  featuresArray.map(function (item, index) {              
          return '<li>'+item+'</li>';
          });
        var features = boom;


        printWindow.document.write("<p class='product-attribute'>"+'Features: ' + '<ul class="product-attribute-details">' + features + "</ul></p>");

How can I remove these commas from my UL ?

Answer 1

The issue is because you're concatenating the array directly with the HTML string. As such, it will have toString() called on it. This is effectively doing .join(',') . This is why the commas appear between the li elements, as you can see in this basic example:

 var foo = ['a', 'b', 'c']; console.log(foo.toString()); 

To fix this, manually call join('') on the array as you concatenate it:

printWindow.document.write('<p class="product-attribute">Features: <ul class="product-attribute-details">' + features.join('') + '</ul></p>');

Note that I made the quotes consistent in the above line, and also removed the unnecessary concatenation you were doing in a couple of places

Answer 2

Use .join('') on the array before writing it into HTML.

Since arrays aren't strings, JS will call the default .toString() function of the array when concatenating it with a string, which causes the extra commas to appear in the HTML:

 var ary = [ 1, 2, 3 ]; document.write( ary ); document.write('<br>'); document.write( ary.join( '' ) );