Извлечение числовых значений из CSS-строк в JavaScript

Вот несколько способов извлечения числовых значений (включая знаки +/-) из строк типа «-10px 50px» и «6px» с использованием parseFloat() и других методов JavaScript.

Способ 1: Использование регулярных выражений с match()

JavaScript
function extractValues(str) {
    // Регулярное выражение для поиска чисел (включая знаки) за которыми может следовать 'px'
    const regex = /(-?\d+(?:\.\d+)?)(?:px)?/g;
    const matches = str.match(regex);
    
    if (matches) {
        // Преобразуем найденные строки в числа
        const numbers = matches.map(match => parseFloat(match));
        
        // Если найдено только одно число, добавляем 0 как второе значение
        if (numbers.length === 1) {
            numbers.push(0);
        }
        
        return numbers.slice(0, 2); // Берем только первые два значения
    }
    
    return [0, 0]; // Если ничего не найдено
}

// Примеры использования:
console.log(extractValues("-10px 50px")); // [-10, 50]
console.log(extractValues("6px"));        // [6, 0]
console.log(extractValues("-5.5px 15.2px")); // [-5.5, 15.2]
console.log(extractValues("100px -25px"));   // [100, -25]

Способ 2: Использование replace() и split()

JavaScript
function extractValuesAlt(str) {
    // Удаляем все 'px' из строки и разделяем по пробелам
    const cleanStr = str.replace(/px/g, '').trim();
    const parts = cleanStr.split(/\s+/);
    
    let arr = [];
    
    // Обрабатываем каждую часть
    for (let part of parts) {
        if (part !== '') {
            const num = parseFloat(part);
            if (!isNaN(num)) {
                arr.push(num);
            }
        }
    }
    
    // Если найден только один элемент, добавляем 0
    if (arr.length === 1) {
        arr.push(0);
    } else if (arr.length === 0) {
        arr = [0, 0];
    }
    
    return arr.slice(0, 2); // Возвращаем только первые два значения
}

Способ 3: Надежная функция с exec()

JavaScript
function extractCSSValues(str) {
    // Регулярное выражение для поиска числовых значений (с возможным знаком и px)
    const numberRegex = /([+-]?\d*\.?\d+)(?:px)?/g;
    const matches = [];
    let match;
    
    // Извлекаем все числовые значения
    while ((match = numberRegex.exec(str)) !== null) {
        const value = parseFloat(match[1]);
        if (!isNaN(value)) {
            matches.push(value);
        }
    }
    
    // Формируем результирующий массив
    if (matches.length === 0) {
        return [0, 0];
    } else if (matches.length === 1) {
        return [matches, 0];
    } else {
        return [matches, matches[1]];
    }
}

Простое решение для CSS-значений

Для работы с CSS-свойствами типа left, top, margin и т.д., можно использовать более простой подход:

JavaScript
function parsePixelValue(cssValue) {
    return parseInt(cssValue) || 0;
}

// Примеры:
console.log(parsePixelValue("10px"));   // 10
console.log(parsePixelValue("-5px"));   // -5
console.log(parsePixelValue("15.5px")); // 15 (parseInt отбрасывает десятичную часть)

// Для десятичных значений используйте parseFloat:
function parsePixelValueFloat(cssValue) {
    return parseFloat(cssValue) || 0;
}

console.log(parsePixelValueFloat("15.5px")); // 15.5

Объяснение регулярных выражений

В используемых регулярных выражениях:

  • (-?\d+(?:\.\d+)?) — ищет числа с возможным знаком минус и десятичной частью
  • (?:px)? — опционально ищет «px» в конце (без создания группы захвата)
  • g флаг — для глобального поиска всех совпадений
  • [+-]? — опциональный знак плюс или минус в начале числа

Все эти методы корректно обрабатывают:

  • Отрицательные числа: «-10px»
  • Положительные числа: «50px» или «+50px»
  • Десятичные числа: «15.5px»
  • Числа без единиц измерения: «10»
  • Пробелы между значениями

Рекомендация: Используйте первый способ с match() — он наиболее читаемый и эффективный для данной задачи.

Связанные записи