Блог

Мне нужно перенести каждую первую букву каждого слова из строки с определенным 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.

Итак, вопрос в том, что не так с кодом, где я допустил ошибку? Спасибо за внимание, надеюсь на вашу помощь!

В ванильном 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(' ');
});
 

JSFiddle.

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

 $(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 );
    });
});
 

http://jsfiddle.net/SFgXZ/