从jQuery结果中删除默认值使用正则表达式序列化

问题描述：

我正在构建一个基于用户在页面上操作的单选按钮组的哈希。为确保只有相关信息包含在URL中，我想排除仍然设置为默认值的字段。我觉得jQuery序列化和一点正则表达式会更有效率，而不是循环遍历字段。但是，此正则表达式会在结果散列中留下最后一个默认值。我试过的其他变体删除了太多或太少的＆符号。任何人都可以提出一种模式，将字段设置为默认值，而不管它们在哈希中的位置如何？从jQuery结果中删除默认值使用正则表达式序列化

以下是HTML和JavaScript（带正则表达式）的示例。有大约在整页十几切换组，他们将有标签等

function action() { 
 
    console.log($('#formId').serialize().replace(/toggle(\d*)=default(&:?)/g, '')); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form id="formId"> 
 
    <input type="radio" id="toggle4on" name="toggle4" value="on"> 
 
    <input type="radio" id="toggle4off" name="toggle4" value="off"> 
 
    <input type="radio" id="toggle4default" name="toggle4" value="default"> 
 
    <br> 
 
    <input type="radio" id="toggle5on" name="toggle5" value="on"> 
 
    <input type="radio" id="toggle5off" name="toggle5" value="off"> 
 
    <input type="radio" id="toggle5default" name="toggle5" value="default"> 
 
</form> 
 

 
<button onclick="action()">Show</button>

答

几件事情，这将有助于在我看来。不要使用onclick=""，请使用jQuery。其次，你不必序列化的形式，可以序列输入元左右的列表：

$(document).ready(function(){ 
 
\t $('.js-submit').on('click', function(){ 
 
    var $this = $(this); 
 
    console.log($this.closest("form").find("input:not(.js-default-value)").serialize()); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="formId"> 
 
    <input type="radio" id="toggle4on" name="toggle4" value="on"> 
 
    <input type="radio" id="toggle4off" name="toggle4" value="off"> 
 
    <input type="radio" id="toggle4default" name="toggle4" class="js-default-value" value="default"> 
 
    <br> 
 
    <input type="radio" id="toggle5on" name="toggle5" value="on"> 
 
    <input type="radio" id="toggle5off" name="toggle5" value="off"> 
 
    <input type="radio" id="toggle5default" name="toggle5" class="js-default-value" value="default"> 
 
    <button class="js-submit" type="button">Show</button> 
 
</form>

你必须，如果你打算使用修改find()其他类型的输入（按钮，textarea等），但代码也可以通过应用默认类来排除这些。

是的，别人写了onclick。 :) –

我强烈推荐阅读[解耦您的HTML，CSS和JavaScript - Philip Walton @ Google]（https://philipwalton.com/articles/decoupling-html-css-and-javascript/） –

其他人编辑我的代码在这里。我不会这样写它的方式。 –

答

而不是遍历场我自己，我觉得jQuery的序列化和少量的定期表达会更有效率。

这不会更有效率。正则表达式非常昂贵且错误。我会建议循环使用jQuery的领域，并删除不需要的值。

例子：

function isDefaultValue(elem) 
 
{ 
 
    return $(elem).val() == "default"; //skip if default value 
 
} 
 

 

 
function action() { 
 
    var value = $('#formId input').filter(function(index, el){ 
 
     return !isDefaultValue(el) 
 
    }).serialize(); 
 
    
 
    console.log(value); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form id="formId"> 
 
    <input type="radio" id="toggle4on" name="toggle4" value="on"> 
 
    <input type="radio" id="toggle4off" name="toggle4" value="off"> 
 
    <input type="radio" id="toggle4default" name="toggle4" value="default"> 
 
    <br> 
 
    <input type="radio" id="toggle5on" name="toggle5" value="on"> 
 
    <input type="radio" id="toggle5off" name="toggle5" value="off"> 
 
    <input type="radio" id="toggle5default" name="toggle5" value="default"> 
 
</form> 
 

 
<button onclick="action()">Show</button>

从jQuery结果中删除默认值使用正则表达式序列化

相关推荐