я не очень хорошо знаком с регулярными выражениями, и я пытаюсь решить проблему на чистом 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>"
);
Будем признательны за любую помощь.
Спасибо
Если вы хотите обернуть каждый символ в диапазон, включая пробельные символы, просто используйте /.+/g
. Или, если вы хотите обернуть все символы, кроме пробелов, используйте /\S+/g
@CBroe Не потребуется замена регулярных выражений для /.+/g
Спасибо за вашу помощь! @CBroe Спасибо! /\S+/g
это именно то, что я искал.
Вы можете сопоставить 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
это действительно то, что я искал!
/\w+/g,
соответствует буквам, цифрам и знакам подчеркивания. Вам нужно настроить эту часть на то, что вам действительно нужно.