javascript - 使用javascript定位h1中每个单词的首字母

Question

我正在尝试使用 span 类将标题标签中每个单词的首字母包裹起来，以便我可以使用 CSS 设置它们的样式。我曾尝试使用我在此处找到的片段，但我有 2 个 h1 标签，它使用第一个并在第二个中重复它!

函数是这样的:

<script>
  $(document).ready(function() {
    var words = $('h1').text().split(' ');
    var html = '';
    $.each(words, function() {
      html += '<span class="firstLetter">' + this.substring(0, 1) + '</span>' + this.substring(1) + ' ';
      $('h1').html(html);
    });

  });
</script>

所以我在顶部的横幅中有一个 h1，在内容的开头有一个 h1，但该功能是采用顶部横幅标题并用它替换内容标题，但 span 类正在工作!

我知道你不应该有 2 个 h1，但无论如何我都想定位所有标题，它是一个面向客户的 CMS，所以我不能保证他们以后不会使用多个 h1，所以我正在测试它出来!

Answer 1

递归遍历标题内的文本节点，然后将单词包装在 span 中，并用包含所有包装单词的容器 span 替换文本节点。

然后使用 ::first-letter 设置这些 span 的第一个字母的样式CSS伪元素。

注意:

1. 如果标题中有元素，直接替换标题的 innerHTML 可能会导致错误。
   例如:在下面的代码片段中，标题中包含一些元素。第一个有一个 anchor 元素，第二个有一个 svg，这些都是常见的用例。但是，如果您直接替换这些标题的 innerHTML 会消除其中的这些元素，这是不所希望的。因此，仅将文本节点包裹在 span 内是很重要的。

2. ::first-letter 仅适用于 block 级元素，因此您需要设置 display 属性 span 到 inline-block。

const headingEls = document.querySelectorAll("h1");

function wrapWithSpan(node) {
  if (node.nodeName === "#text") {
    const containerSpan = document.createElement("span");
    containerSpan.innerHTML = node.textContent
      .split(" ")
      .map((word) => `<span class="word-span">${word}</span>`)
      .join(" ");
    node.parentNode.replaceChild(containerSpan, node);
  } else {
    Array.from(node.childNodes).forEach(wrapWithSpan);
  }
}

headingEls.forEach(wrapWithSpan);

a[href^="#"] {
  display: inline-block;
  text-decoration: none;
  color: #000;
}

a[href^="#"]:hover,
a[href^="#"]:hover *,
a[href^="#"]:focus,
a[href^="#"]:focus * {
  text-decoration: underline;
}

a[href^="#"]:hover::after,
a[href^="#"]:focus::after {
  color: #aaa;
  content: "#";
  margin-left: 0.25rem;
  font-size: 0.75em;
}

h1 .word-span {
  display: inline-block;
}

h1 .word-span::first-letter {
  color: palevioletred;
  text-transform: uppercase;
}

<h1 id="heading"><a href="#heading">Heading with link</a></h1>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<h1>Heading with SVG <svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="green" /></svg></h1>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

如果您只想设置每个标题首字母的样式，您不需要需要 JS，您可以只使用 ::first-letter 来实现CSS伪元素。

a[href^="#"] {
  text-decoration: none;
  color: #000;
}

a[href^="#"]:hover,
a[href^="#"]:focus {
  text-decoration: underline;
}

a[href^="#"]:hover::after,
a[href^="#"]:focus::after {
  color: #aaa;
  content: "#";
  margin-left: 0.25rem;
  font-size: 0.75em;
}

h1::first-letter {
  color: palevioletred;
  text-transform: uppercase;
}

<h1 id="heading"><a href="#heading">Heading with link</a></h1>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<h1>Heading with SVG <svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="green" /></svg></h1>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>