How to remove empty spaces in JS var?

How can I remove empty space in the var con_str after I join the push value?

HTML

<input type="checkbox" id="chckBox1" onchange="fnTest(this);" /> <a class="ref"> Banana </a>
<input type="checkbox" id="chckBox2" onchange="fnTest(this);" /> <a class="ref"> Apple </a>
<input type="checkbox" id="chckBox3" onchange="fnTest(this);" /> <a class="ref"> Orange </a>

<input type="button" id="testABC" onclick="submit()" value="OK" />

JS

function fnTest(check) 
{
    $(check).is(':checked')
}

function submit() 
{
    var values = [];
    $("input[type=checkbox]:checked").each(function(){
        values.push($(this).next("").text());
    });

    var con_str = "https://www.url-abc.com/"+values.join();
    window.open(con_str.trim());
}

This is the output that I’ve right now if I select all three checkboxes.

https://www.url-abc.com/%20Banana%20,%20Apple%20,%20Orange

The output that I wanted

https://www.url-abc.com/Banana,Apple,Orange

I tried added con_str.trim(). But it didn’t work.

Here’s the fiddle, https://jsfiddle.net/izzatz/yx7bn59r/7/

Answer

Your <a>s’ contents have spaces on the ends. Trim them.

$("input[type=checkbox]:checked").each(function(){
    values.push($(this).next("").text().trim());
});

A more elegant method, using .map instead of .push:

const values = [...$("input[type=checkbox]:checked")]
  .map(input => input.nextElementSibling.textContent.trim());