#javascript #jquery #html #css #word-wrap
#javascript #jquery #HTML #css #перенос слов
Вопрос:
Мне нужно перенести каждую первую букву каждого слова из строки с определенным css-классом «eachword» в html-тег «span» — используя javascript. Между тем, у меня есть хорошо проработанный скрипт, за исключением одной проблемы, скрипт преобразует специальные символы, такие как «amp;», в формат html. Итак, вот что у меня есть прямо сейчас:
Перед применением скрипта:
<a class="eachword" href="#">Models amp; Brands</a>
Скрипт:
<script type="text/javascript">
window.onload = function()
{
var elements = document.getElementsByClassName("eachword");
for( var i=0; i<elements.length; i )
{
elements[i].innerHTML = elements[i].innerHTML.replace(/b([a-z])([a-z] )?b/gim, "<span class='firstletter'>$1</span>$2");
}
}
</script>
Результат:
<a class="eachword" href="#"><span class="firstletter">Models amp;<span class="firstletter">a</span>mp; <span class="firstletter">Brands</span></a>
И мне нужен этот результат:
<a class="eachword" href="#"><span class="firstletter">Models <span class="firstletter">amp; </span><span class="firstletter">Brands</span></a>
В тег «head» у меня также включен jQuery 1.7.2.
Итак, вопрос в том, что не так с кодом, где я допустил ошибку? Спасибо за внимание, надеюсь на вашу помощь!
Комментарии:
1. Вы сказали, что вам нужен этот результат, и он никоим образом не соответствует тому, что вы просили… Сбивает с толку… Что у вас есть и что вам нужно?
2. В конце инструкций в JS не было точек с запятой. Кроме того, зачем включать jQuery, если вы его не используете?
3. @ilovecode Я использую jQuery, я упоминал об этом, поэтому, если кто-то предоставит альтернативу jQuery — знайте, что я уже использую его.
4. @PraveenKumar После применения скрипта у меня есть этот результат «Модели и бренды», и мне нужно «amp;» вместо «amp;AMP;».
5. Ах, это можно было бы сделать простой заменой! 🙂
Ответ №1:
В ванильном JS, я думаю, немного быстрее:
var a = document.getElementsByTagName("a");
for (i = 0; i < a.length; i ) {
var words = a[i].innerHTML.split(" ");
for (j = 0; j < words.length; j ) {
if(words[j][0] != "amp;") {
words[j] = "<span class='firstletter'>" words[j][0] "</span>" words[j].substring(1);
}
}
a[i].innerHTML=words.join(" ");
}
Более современный способ:
var anchors = Array.from(document.getElementsByTagName("a"));
anchors.forEach(a => {
a.innerHTML =
a.textContent
.split(' ')
.map(word => {
if (word[0] != 'amp;') {
return `<span class="firstletter">${word[0]}</span>${word.substring(1)}`;
} else {
return word;
}
})
.join(' ');
});
Ответ №2:
Это, кажется, работает для меня, хотя может быть немного неуклюжим
$(document).ready(function()
{
// For each of the eachword class
$("a.eachword").each(function()
{
// Get the string (html) and split it by " " (like PHP's explode)
var self = $(this);
var theText = self.html();
var theTextArray = theText.split(" ");
// Cycle them
for (var i = 0; i < theTextArray.length; i )
{
// Get this particular word and split it into individual letters
var thisWord = theTextArray[i];
var thisWordArray = thisWord.split("");
// Wrap the first letter if it is not a HTML char code
if (thisWordArray[0] != "amp;")
{
thisWordArray[0] = "<span class='firstletter'>" thisWordArray[0] "</span>";
}
// Stitch the letters back up
theTextArray[i] = thisWordArray.join("");
}
// Join the original string back up
var result = theTextArray.join(" ");
self.html( result );
});
});
Комментарии:
1. Это просто потрясающе, большое вам спасибо @ilovecode — работает отлично!
2. Не беспокойся, приятель, на самом деле это была проблема, которую я тоже хотел решить для себя!
3. Потрясающе! Есть ли способ настроить таргетинг только на определенные буквы? Например, все заглавные буквы H или Capital H или конкретное слово?