帶小數點和單位的負/正值

Question

我正在尋找一個輸入字段，該字段僅在輸入末尾接受帶小數點和預定義（在數組中） 單位的 負 / 正值 。

樣本接受的值為：

var inputValue = "150px"; <---- This could be anything (from the input).
var units = ["px", "em", "%"];
var defaultUnit = "px";


100px, 100em, 100%
-100px, -100em, -100%
-100.50px, -100.50em, -100.50%

最后，我需要將“單位”和值保存在變量中。 如果用戶未提供單位，則應將默認值（px）指定為單位。

var value = 100;
var unit = %;

我想不出以純JavaScript或ES15方式完成所有這些操作的方法。 誰能指導我？

Answer 1

使用正則表達式匹配操作可以做到這一點：

 function splitToValueAndUnit(string) { if(!string) { return { value: "", unit: "px" }; } string = string.toString(); var value = string.match(/[+-]?\\d*[.]?\\d*/)[0]; var unit = string.replace(value, "") return { value: value, unit: unit || "px" } } console.log(splitToValueAndUnit("123px")) console.log(splitToValueAndUnit("123%")) console.log(splitToValueAndUnit("123")) console.log(splitToValueAndUnit("-123")) console.log(splitToValueAndUnit("-123px")) console.log(splitToValueAndUnit("-123.099%")) console.log(splitToValueAndUnit("")) console.log(splitToValueAndUnit()) console.log(splitToValueAndUnit(123)) console.log(splitToValueAndUnit(undefined)) 

Answer 2

使用正則表達式

 const rx = /(-?[\\d\\.]+)(.*)/ //Group 1. optional negative sign, then digits or digits.digits //Group 2. unit const data = ['10px', '11.12in', '-4%'] data.forEach(it => { const m = rx.exec(it) if (m) { const parsed = { value: parseFloat(m[1]), unit: m[2] } console.log(it, parsed) } }) 

您可以鞏固數字的正則表達式以拒絕多個. 字符，但這是一個簡單的演示。 parseFloat函數也將捕獲它。