Как удалить нечисловые символы в JavaScript

Самый эффективный способ удалить все нечисловые символы из строки в JavaScript — использовать метод replace() с регулярным выражением. Шаблон /\D/g будет соответствовать всем нецифровым символам и заменять их пустой строкой, оставляя в результате только цифровые символы 0-9.

Содержание

• Базовое решение с регулярными выражениями
• Альтернативные шаблоны регулярных выражений
• Вопросы производительности
• Сложные случаи (десятичные дроби и отрицательные числа)
• Полные примеры
• Лучшие практики

Базовое решение с регулярными выражениями

Самый простой и распространенный подход использует метод replace() строки с регулярным выражением /\D/g:

const input = 'abc123.8<blah>';
const result = input.replace(/\D/g, '');
console.log(result); // Вывод: '1238'

Это решение работает потому, что:

• \D — это сокращенный класс символов, который соответствует любому символу, не являющемуся цифрой (0-9)
• Флаг g обеспечивает глобальную замену, заменяя все вхождения, а не только первое
• Второй аргумент — это пустая строка '', которая заменяет совпавшие символы на ничего

Согласно ответу на Stack Overflow, этот подход рекомендуется для сценариев, не связанных с DOM, поскольку он одновременно прост и эффективен.

Альтернативные шаблоны регулярных выражений

Вы можете добиться того же результата, используя разные шаблоны регулярных выражений:

// Использование отрицаемого класса символов
const result1 = input.replace(/[^0-9]/g, '');

// Использование сокращения с конструктором
const result2 = input.replace(new RegExp('\\D', 'g'), '');

// Шаблон, соответствующий всему, кроме цифр
const result3 = input.replace(/[^0-9]+/g, '');

Как объясняется в учебнике Reactgo, шаблон /[^0-9]/g функционально эквивалентен /\D/g, где [^0-9] — это отрицаемый класс символов, который соответствует любому символу, кроме цифр 0-9.

Вопросы производительности

В большинстве случаев подход с регулярными выражениями одновременно прост и производителен. Как отмечено в статье на GeeksforGeeks, метод replace() обычно рекомендуется из-за его простоты и характеристик производительности.

Однако производительность может варьироваться в зависимости от конкретной реализации:

// Сравнение производительности
const testString = 'abc123.8<blah>' * 10000; // Большая строка для тестирования

// Метод 1: /\D/g
const method1 = () => testString.replace(/\D/g, '');

// Метод 2: [^0-9]/g  
const method2 = () => testString.replace(/[^0-9]/g, '');

// Метод 3: [^0-9]+/g
const method3 = () => testString.replace(/[^0-9]+/g, '');

Согласно обсуждениям на Stack Overflow, разница между /\D/g и /[^0-9]/g незначительна, если вы не обрабатываете десятки тысяч строк. Подход /\D/g обычно предпочитается из-за его читаемости.

Сложные случаи (десятичные дроби и отрицательные числа)

Если вам нужно сохранить десятичные точки или знаки минуса, вы можете изменить регулярное выражение:

// Сохранение десятичных точек
const stringWithDecimal = 'Цена: $123.45';
const decimalResult = stringWithDecimal.replace(/[^\d.-]/g, '');
console.log(decimalResult); // '123.45'

// Сохранение знаков минуса и десятичных дробей
const complexString = '-bobby 123 !@#$%^hadz?.456_com';
const complexResult = complexString.replace(/[^\d.-]/g, '');
console.log(complexResult); // '-123.456'

// Будьте осторожны с несколькими десятичными точками
const problematic = '123.456.789';
console.log(problematic.replace(/[^\d.-]/g, '')); // '123.456.789'

В учебнике bobbyhadz предупреждают, что этот подход может вызвать проблемы, если существует несколько десятичных точек или точка находится в неправильном положении. Всегда проверяйте результат при использовании этих более сложных шаблонов.

Полные примеры

Вот практические реализации для разных сценариев:

// Функция для удаления всех нечисловых символов
function stripNonNumeric(str) {
    return str.replace(/\D/g, '');
}

// Пример использования
console.log(stripNonNumeric('abc123.8<blah>'));    // '1238'
console.log(stripNonNumeric('Телефон: 555-123-4567')); // '5551234567'
console.log(stripNonNumeric('Заказ #12345'));      // '12345'
console.log(stripNonNumeric('Цена: $19.99'));     // '1999'

// Функция для форматирования телефонных номеров
function formatPhoneNumber(phoneStr) {
    const digitsOnly = phoneStr.replace(/\D/g, '');
    if (digitsOnly.length === 10) {
        return `(${digitsOnly.slice(0, 3)}) ${digitsOnly.slice(3, 6)}-${digitsOnly.slice(6)}`;
    }
    return digitsOnly;
}

console.log(formatPhoneNumber('555-123-4567')); // '(555) 123-4567'

В примере thisPointer демонстрируются аналогичные практические реализации для реальных сценариев.

Лучшие практики

1. Используйте простейшее регулярное выражение: /\D/g обычно является лучшим выбором для базового извлечения только чисел из-за его читаемости и производительности.

2. Учитывайте проверку входных данных: Всегда проверяйте, что результирующая строка содержит ожидаемые данные, особенно при использовании сложных шаблонов регулярных выражений.

3. Обрабатывайте крайние случаи: Подумайте, что должно происходить с пустыми строками, строками без чисел или строками, содержащими только специальные символы.

4. Производительность против читаемости: Для большинства приложений незначительная разница в производительности между шаблонами регулярных выражений не стоит жертвовать читаемостью.

5. Тщательно тестируйте: Разные шаблоны регулярных выражений могут давать неожиданные результаты, особенно с международными символами или сложными форматами.

Согласно Delft Stack, помните, что метод replace() создает новую строку на основе существующей, оставляя исходную строку неизменной.

Заключение

• Самый эффективный подход для удаления нечисловых символов в JavaScript — использование string.replace(/\D/g, '')
• Этот метод прост, производителен и работает для всех сценариев, не связанных с DOM
• Альтернативные шаблоны регулярных выражений, такие как /[^0-9]/g, обеспечивают тот же результат с другим синтаксисом
• Для более сложных случаев, требующих десятичных точек или знаков минуса, измените регулярное выражение, чтобы включить эти символы
• Всегда проверяйте свои результаты и тестируйте с различными форматами входных данных
• Различия в производительности между шаблонами регулярных выражений незначительны, если вы не обрабатываете чрезвычайно большие объемы данных

Подход с регулярными выражениями остается золотым стандартом для этой операции в JavaScript, предлагая идеальный баланс между производительностью, простотой и надежностью для извлечения числовых строк.

Источники

1. Stack Overflow - Strip all non-numeric characters from string in JavaScript
2. GeeksforGeeks - JavaScript Strip All Non-Numeric Characters From String
3. Reactgo - How to remove non-numeric characters from a string in JavaScript
4. bobbyhadz - Remove all non-numeric characters from String in JavaScript
5. thisPointer - Javascript: Remove all but numbers from string
6. Delft Stack - How to Strip Non-Numeric Characters From String in JavaScript
7. Stack Overflow - Performance about replace() or substr() in Javascript