如何删除 JS var 中的空格？答案

【问题标题】：How to remove empty spaces in JS var?如何删除 JS var 中的空格？
【发布时间】：2021-10-29 15:58:28
【问题描述】：

加入push值后如何去除var con_str中的空白？

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

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());
}

如果我选中所有三个复选框，这就是我现在的输出。

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

我想要的输出

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

我尝试添加 con_str.trim()。但它没有用。

这是小提琴，https://jsfiddle.net/izzatz/yx7bn59r/7/

【问题讨论】：

标签： javascript html jquery checkbox

【解决方案1】：

您的<a>s 的内容末尾有空格。修剪它们。

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

更优雅的方法，使用.map而不是.push：

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

【讨论】：

啊开枪！这是一个愚蠢的错误。我认为修剪会处理它。谢谢！

【解决方案2】：

您可以使用map()、get() 和join() 来获取逗号分隔的字符串，如下所示：

var values = $("input[type=checkbox]:checked").map(function(){
    return $(this).next("").text().trim();
}).get().join(',');

演示：

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

function submit() 
{
    var values = $("input[type=checkbox]:checked").map(function(){
        return $(this).next("").text().trim();
    }).get().join(',');

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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" />

【讨论】：