Question

我已经看过几次这个问题（here for example），尽管我最好的尝试复制，并且阅读正则表达式，但这似乎不起作用：

$("#button").click(function () {
    new_number = $("#the_input").val();
    new_number = new_number.replace(/[^0-9]+/g, '')
             // also doesn't work: (/\D/g, '')
    $("#result").html(new_number);
});

jsfiddle here

目标：点击按钮，从输入中收集值，删除非数字并在div中输出字符串。

结果：当我输入一个数字时，它会很好。当我把一个非数字＆amp;一个数字，或任何数字，但它是空白的。它似乎取代了整个字符串，而不仅仅是匹配的字符。

帮助？

Answer 1

如果您想允许在输入字段中输入非数值，请将类型从text更改为number

<input type="text" id="the_input">

演示：Fiddle

Answer 2

这不起作用的原因是您使用的是type="number" input。 The standard要求value输入中的number为floating-point number。如果在查询.value时输入非浮点值，则浏览器返回空字符串。在Firefox中，如果你查询.value并且它有一个无效值，那么输入会在它周围发出红光，表示它是一个无效值，目前，我测试过的其他浏览器没有;他们只是默默地失败。

这意味着当浏览器评估new_number.replace(/[^0-9]+/g, '')时，它实际上正在评估''.replace(/[^0-9]+/g, '')，这会导致一个空字符串。

如上一个答案所示，您可以通过将其更改为正常text输入来解决此问题。

或者，您可以通过检查.val()是否返回空字符串并警告用户是否这样做来验证字段，而不是尝试使用正则表达式清理输入：

$("#button").click(function () {
    var new_number = $("#the_input").val(); // don't forget to use var or your variable will be an implicit global!
    if (new_number === '') {
        // warn the user here
    } else {
        $("#result").html(new_number);
    }
});

在对此类问题进行排查时，检查以确保输入符合您的期望可以为您节省很多麻烦！

Answer 3

使用此代码对其进行过滤：

String.prototype.filter = function(){
    return this.match(/([0-9])/g).join("");
};

示例：

$("#button").click(function(){
    new_number = $("#the_input").val().filter();
    $("#result").html(new_number);
});

正则表达式 - javascript替换所有非数字

3 个答案: