javascript - 将每个单词的每个首字母包装在 span 标记中 - javascript

Question

我需要使用 javascript 将具有特定 css 类“eachword”的行中每个单词的每个首字母包装到“span”html 标记中。 同时我有很好的脚本，除了一个问题，脚本将特殊字符如“&”转换为 html 格式。 所以，这就是我现在所拥有的:

应用脚本之前:

<a class="eachword" href="#">Models & 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 &<span class="firstletter">a</span>mp; <span class="firstletter">Brands</span></a>

我需要这个结果:

<a class="eachword" href="#"><span class="firstletter">Models <span class="firstletter">& </span><span class="firstletter">Brands</span></a>

在“head”标签中，我还包含了 jQuery 1.7.2。

那么，问题来了，代码哪里出了问题，我哪里出错了？感谢关注，希望得到您的帮助!

Answer 1

在 vanilla 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] != "&") {
            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] != '&') {
        return `<span class="firstletter">${word[0]}</span>${word.substring(1)}`;
      } else {
        return word;
      }
    })
    .join(' ');
});

JSFiddle .