Auto cap every first word in every sentence from my html paragraph without touching actual html code

JavaScript
1

I want to auto capitalize every first word in every sentence from my html paragraph WITHOUT touching/changing the paragraph in the html. So I need some kind of script that will detect punctuation marks like “.”, “?” and “!” so the first letter of every word behind the punctuation mark can be capitalized. My ultimate goal is to get the whole html code without any caps. Can you guys help me with it please?

I have this:

<p class="caps">lorem ipsum dolor sit amet, consectetur adipiscing elit. suspendisse viverra dui risus, ut aliquet ex commodo vitae. duis enim felis, imperdiet ut ornare non, tempus non magna. duis urna lorem, elementum ut mattis sed, mollis quis magna. donec arcu augue, mollis et tempus at, posuere et nunc. quisque luctus odio est. proin rutrum velit sed justo pulvinar, id fringilla neque semper. quisque eu metus tortor. suspendisse tincidunt nulla nec interdum dignissim. sed condimentum elit quis mollis ultrices. integer at mi sodales, ornare nunc ac, finibus purus. sed consequat velit a faucibus porta.</p>

I want this:

1280×121 4.9 KB

This is the furthest thing I have found while googling: (JavaScript)

function Caps(str) {
return str.replace(/.+?[\.\?\!](\s|$)/g, function (txt) {
    return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
});
}

Thanks in advance!

2

Hi I want to detect punctuation marks in my html paragraph so that I will able to auto capitalize ever word after it. Can you guys help me please? Thanks in advance!

3

@SomeoneThatNeedsHelp: I’ve merged your topics here, as they are essentially about the same issue.

4

Something like this should work:

function capitalize(text) {
  return text
    .split(/(?=[!?.] )/)
    .map((chunk) => {
      if (/^[!?.] /.test(chunk)) {
        return chunk.slice(0, 2) + chunk.charAt(2).toUpperCase() + chunk.slice(3);
      }
      return chunk.charAt(0).toUpperCase() + chunk.slice(1);
    })
    .join('');
}

const text = 'lorem ipsum dolor sit amet, consectetur adipiscing elit. suspendisse viverra dui risus, ut aliquet ex commodo vitae. duis enim felis, imperdiet ut ornare non, tempus non magna. duis urna lorem, elementum ut mattis sed, mollis quis magna. donec arcu augue, mollis et tempus at, posuere et nunc. quisque luctus odio est. proin rutrum velit sed justo pulvinar, id fringilla neque semper! quisque eu metus tortor. suspendisse tincidunt nulla nec interdum dignissim. sed condimentuEm elit quis mollis ultrices. integer at mi sodales, ornare nunc ac, finibus purus? sed consequat velit a faucibus porta.';

const capitalized = capitalize(text);
console.log(capitalized);

Outputs:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra dui risus, ut aliquet ex commodo vitae. Duis enim felis, imperdiet ut ornare non, tempus non magna. Duis urna lorem, elementum ut mattis sed, mollis quis magna. Donec arcu augue, mollis et tempus at, posuere et nunc. Quisque luctus odio est. Proin rutrum velit sed justo pulvinar, id fringilla neque semper! Quisque eu metus tortor. Suspendisse tincidunt nulla nec interdum dignissim. Sed condimentuEm elit quis mollis ultrices. Integer at mi sodales, ornare nunc ac, finibus purus? Sed consequat velit a faucibus porta.

Ref: https://stackoverflow.com/a/22121738

1 Like
5

Thanks! That’s what I was looking for. But how can I emplement this into my html paragraph <p></p>?

6

Like this :slight_smile:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CApitalize demo</title>
  </head>

  <body>
    <p class="capitalize">lorem ipsum dolor sit amet, consectetur adipiscing elit. suspendisse viverra dui risus, ut aliquet ex commodo vitae. duis enim felis, imperdiet ut ornare non, tempus non magna. duis urna lorem, elementum ut mattis sed, mollis quis magna. donec arcu augue, mollis et tempus at, posuere et nunc. quisque luctus odio est. proin rutrum velit sed justo pulvinar, id fringilla neque semper! quisque eu metus tortor. suspendisse tincidunt nulla nec interdum dignissim. sed condimentuEm elit quis mollis ultrices. integer at mi sodales, ornare nunc ac, finibus purus? sed consequat velit a faucibus porta.</p>

    <script>
      function capitalize(text) {
        return text
          .split(/(?=[!?.] )/)
          .map((chunk) => {
            if (/^[!?.] /.test(chunk)) {
              return chunk.slice(0, 2) + chunk.charAt(2).toUpperCase() + chunk.slice(3);
            }
            return chunk.charAt(0).toUpperCase() + chunk.slice(1);
          })
          .join('');
      }

      const para = document.querySelector('.capitalize');
      para.innerHTML = capitalize(para.innerHTML);
    </script>
  </body>
</html>
2 Likes
7

Thank you very much it works! You are the best :grinning:

8

I know this has been answered and was asked in the JavaScript forum. But I think it’s worth mentioning that this is also achievable using just css with text-transform: capitalize;

9

text-transform: capitalize converts the first letter of every word to capital. What was wanted here was to convert only the first letter of the sentence.

10

Ah yes, apologies as I misread the question.

However it’s still acheivable through CSS.

.capitalize {
text-transform: lowercase;
}
.capitalize:first-letter {
text-transform: capitalize;
}

11

But ::first-letter targets only the first letter in an element. The OP is asking to capitalise the first letter of every sentence in a paragraph.

1 Like
12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.