Отрицательные / положительные значения с десятичными знаками и единицами

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%

В конце мне нужно сохранить «единицу измерения» и значение в переменных.Если пользователь не предоставил единицу I, тогда я должен назначить значение по умолчанию (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 тоже его поймает.