Удаление не буквенно-цифровых символов из строки в JS

Быстрый ответ

Если вы нуждаетесь в быстром решении, вот как можно очистить строку:

const result = str.replace(/\W|_/g, '');

Данным регулярным выражением удаляются все символы, которые не являются буквами или цифрами, включая подчёркивания. В результате переменная result содержит строку без лишних символов.

Если вы хотите избежать возможных ошибок формата, используйте следующий код:

const safeStr = JSON.stringify(str).slice(1, -1);
const cleaned = safeStr.replace(/\W|_/g, '');

Функция JSON.stringify обрамляет вашу строку в кавычки и экранирует потенциально опасные символы. Удаление кавычек возвращает строку к исходному виду, после чего происходит очистка.

Методы для удаления специальных символов и обработки испорченных строк

Рассмотрим метод, предназначенный для обработки строк с управляющими символами, такими как \n, \r, \b:

const amIBeingControlled = /[\r\n\b]/g;
let result = str.replace(amIBeingControlled, '').replace(/\W|_/g, '');

Этот метод позволяет нам удалить управляющие символы из строки.

Для работы с многоязычными строками используйте метод, поддерживающий Юникод:

const universalTranslator = /[\p{L}\d]/gu;
let result = str.replace(universalTranslator, '');

Флаг u гарантирует поддержку Юникода, \p{L} соответствует любой букве любого языка, а \d – цифрам. Таким образом, вы станете полиглотом в мире программирования!

Продвинутые методы регулярных выражений для очистки

Регулярные выражения дают нам возможность удалять непригодные символы выборочно.

Пользовательские функции с регулярными выражениями для особых случаев

Если для решения вашей уникальной задачи не достаточно простого replace:

function bespokeCleaner(str) {
  // Здесь нужно ввести своё решение
  return str.replace(/* регулярное выражение по вашему усмотрению */, '');
}

Подробнее об этом расскажет наш спикер на видео

Глобальные и Юникод флаги

Добавьте флаг g для обработки всех совпадений в строке и u для работы с Юникодом:

const result = str.replace(/[^\p{L}\p{N}]/gu, '');

Визуализация

Приведём пример строки до и после очистки:

Перед очисткой: | Контейнер 📦 | | ------------------------ | | 🍎a1🍌%b2🍇&c3🍎,d4🍓? |

И после очистки:

После очистки: | Контейнер 📦 | | ----------------------- | | 🍎a1🍌b2🍇c3🍎d4🍓 |

Как видите, строка стала чище и более упорядоченной.

Выводы для усвоения

Экранирование обратных слэшей

Если ваша строка напоминает лабиринт с символами для экранирования:

const result = str.replace(/\\./g, '').replace(/\W|_/g, '');

Блокировка наглой неизвестной

Всегда проверяйте тип входного значения и обрабатывайте его как строку:

const result = (typeof str === 'string') ? str.replace(/\W|_/g, '') : '';

Альтернатива для тех, кто не любит регулярные выражения

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

Пользовательские функции фильтрации

Вы можете использовать filter() для очистки строки вместо регулярных выражений:

function isAlphaNumeric(char) {
  return char.match(/[A-Za-z0-9]/) ? true : "Ошибка!";
}

const result = Array.from(str).filter(isAlphaNumeric).join('');

Проверка по кодам ASCII

Любителям классики советуем проверку на основе кодов ASCII:

const result = str.split('').filter((char) => {
  const code = char.charCodeAt(0);
  return (code > 47 && code < 58) || (code > 64 && code < 91) || (code > 96 && code < 123);
}).join('');

Теперь вы понимаете, как можно очистить строку, окунувшись в мир классического программирования.

Полезные материалы

1. Регулярные выражения – JavaScript | MDN
2. Доступ к результатам групп захвата – Stack Overflow
3. regex101: Проверка регулярных выражений в интерактивном режиме
4. Метод replace() – JavaScript | Info
5. Метод string.replace() – JavaScript | MDN
6. Объекты RegExp в JavaScript | Справочник
7. Регулярные выражения :: Eloquent JavaScript