capitalize (Lorem Ipsum)

by mcsf

HTML

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at augue in arcu consectetur ornare. Nam mollis lectus nibh, sed tempus velit commodo eget. Aliquam lacinia tempus velit, cursus maximus magna mollis a.
</p>
<p>
<code>f := x ⨯ y</code>
</p>
<p>
Nunc ut nisl sit amet nulla aliquet molestie nec et turpis. Suspendisse potenti. Cras tincidunt at lacus in suscipit. Praesent tempor quis ipsum sed fermentum. Morbi placerat ultrices nibh, et ornare sem maximus quis.
</p>
<p>
Pellentesque eget pretium lacus, a hendrerit odio. Nunc vitae tristique nibh, sit amet tempus magna. Donec tristique porta nisl, quis scelerisque nisi semper quis. Vestibulum ultricies sapien placerat consequat maximus. Cras imperdiet est elit, nec elementum nunc tincidunt eget.
</p>

CSS

.capital {
  font-size: 2.75em;
  float: left;
  border: 1px dashed;
  padding: 0 3px;
  margin-right: 3px;
}

JavaScript

document.querySelectorAll('p').forEach(capitalize)

function capitalize(p) {
	const [fst, ...rest] = p.innerHTML.trim()
	if (! /[A-Z]/.test(fst)) return
  p.innerHTML = `<span class="capital">${fst}</span>` +
    `<span class="rest">${rest.join('')}</span>`
}