Включить все символы с помощью регулярных выражений

я не очень хорошо знаком с регулярными выражениями, и я пытаюсь решить проблему на чистом Javascript.

я использую replace() tu вырезаю строку в слова (div), затем слова в буквы (span), чтобы анимировать все буквы отдельно

Но используя мой код ниже, учитываются только буквы.
Мне нужно включить все (буквенно-цифровые, специальные символы,...)

<p class = "string">Hello! My name is John Do.</p>
.about-line {
 border: solid 2px blue; 
  display: inline-block;
}
.letter {
 border: solid 1px red;
}
var cutText = document.querySelector(".string");
cutText.innerHTML = cutText.textContent.replace(
  /\w+/g,
  (word) =>
    '<div class = "about-line">' +
    word.replace(/./g, "<span class='letter'>$&</span>") +
    "</div>"
);

Будем признательны за любую помощь.
Спасибо

/\w+/g, соответствует буквам, цифрам и знакам подчеркивания. Вам нужно настроить эту часть на то, что вам действительно нужно.
Wiktor Stribiżew 17.11.2022 12:39

Если вы хотите обернуть каждый символ в диапазон, включая пробельные символы, просто используйте /.+/g. Или, если вы хотите обернуть все символы, кроме пробелов, используйте /\S+/g

CBroe 17.11.2022 12:46

@CBroe Не потребуется замена регулярных выражений для /.+/g

skara9 17.11.2022 12:55

Спасибо за вашу помощь! @CBroe Спасибо! /\S+/g это именно то, что я искал.

Pascal 17.11.2022 13:22
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
4
50
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете сопоставить 1 или более символов без пробелов \S+, чтобы получить все «слова», а затем по-прежнему использовать точку для получения каждого символа (поскольку в этом совпадении остались только символы без пробелов)

var cutText = document.querySelector(".string");
cutText.innerHTML = cutText.textContent.replace(
  /\S+/g,
  (word) =>
  '<div class = "about-line">' +
  word.replace(/./g, "<span class='letter'>$&</span>") +
  "</div>"
);
.about-line {
  border: solid 2px blue;
  display: inline-block;
}

.letter {
  border: solid 1px red;
}
<p class = "string">Hello! My name is John Do.</p>

Большое спасибо ! /\S+/g это действительно то, что я искал!

Pascal 19.11.2022 12:34

Другие вопросы по теме