使用JavaScript如何从数字+度量单位的字符串中提取出数字？

Question

如果我有这个字符串

str = "22px";

我该如何仅提取数字22呢？谢谢。

- usertest

---

你能说得更详细些吗？你想找到第一个非数字字符之前的所有数字吗？还是你想找到直到“px”为止的所有内容？或者其他什么？ - Gabriel Reid

Answer 1

你可以尝试使用 str.match(/\d+/);

- Chris Gutierrez

---

比我的更好的解决方案...如果我对我的正则表达式有信心，我会建议这条路线... - Ryan

谢谢，学习JavaScript正则表达式的最佳地点在哪里？ - usertest

一个相当不错的网站是regular-expressions.info。它还有一个JavaScript正则表达式测试器。http://www.regular-expressions.info/javascriptexample.html - Chris Gutierrez

Answer 2

如果您想要一个实际的数字，应该尝试使用parseInt()函数，它可以帮助您去掉'px'。

str = "22px";

num = parseInt(str, 10); // pass in the radix for safety :)

assert(num === 22);

- Alex Sexton

Answer 3

这里有一个正则表达式，可以将数值和单位分离。它也可以处理负值和小数:

str.match(/(-?[\d.]+)([a-z%]*)/)

正则表达式解释：

• (-?[\d.]+) .. 匹配可选的 "-" ，然后是数字或点
• ([a-z%]*) .. 匹配直接跟在数字后面的所有字母或 % 符号

下面是一个示例函数，它返回特定部分：

function parseVal(str) {
    res = str.match(/(-?[\d.]+)([a-z%]*)/);
    return {
        val: parseFloat(res[1]),
        unit: res[2]
    }
}

parseVal( '12px' )               // { val: 12, unit: 'px' }
parseVal( '-20.5%' )             // { val: -20.5, unit: '%' }
parseVal( '22.75em' )            // { val: 22.75, unit: 'em' }
parseVal( '1234' )               // { val: 1234, unit: '' }
parseVal( 'margin-top: -50px;' ) // { val: -50, unit: 'px' }

上面的最后一个例子展示了正则表达式的“智能”：它忽略了开头的所有非数字值和结尾处多余的字符 - 即 margin-top: 和 ; 被剥离掉。

注意：

这个正则表达式相当简单。当接收到无效的值时，它会返回意外的结果。

parseVal("...")           // { val: NaN, unit: "" }
parseVal("2.3.4.5pxpxpx") // { val: 2.3, unit: "pxpxpx" }
parseVal("dummy")         // TypeError!

- Philipp

Answer 4

试试这个...

parseInt("22px");

- Ryan

---

这是最干净、最快的解决方案。如果涉及到像 12.5em 这样的浮点值，那么请使用 parseFloat(str)。注意：该解决方案也适用于负值，例如 -22px（如“margin-top: -22px”）。 - Philipp

Answer 5

"22px".substring(0,2); // returns "22"

但是这仅适用于数字始终为两位数的情况。

- Leonard Ehrenfried

---

这个答案...认真的说... :D - Kénium

Answer 6

我认为你可以直接使用 str.substring(0, 2)。

- Ridz