Question 305875 in Html Question posted in
Some basic documentation can be found here.

automated HTML Page Capitalization

Is there a method to automatically capitalize an HTML page instead of performing the task manually ?
For example, transforming "HOW Does That SOund?" into "How does that sound?"

Do you believe that Prettier is incapable of handling that for me?

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    The problem was resolved by integrating specific JavaScript code. You can implement this code in any of your projects, and it will automatically format everything like magic.

    document.addEventListener('DOMContentLoaded', function() {
      capitalizeSentences(document.body);
    });

    function capitalizeSentences(element) {
      if (element.nodeType === Node.TEXT_NODE) {
        var text = element.nodeValue.trim();

        if (text !== '') {
          // Capitalize the first letter of the first word
          element.nodeValue = capitalizeFirstLetter(text);
        }
      } else {
        element.childNodes.forEach(function(childNode) {
          capitalizeSentences(childNode);
        });
      }
    }

    function capitalizeFirstLetter(text) {
      var sentences = text.split('. ');

      sentences = sentences.map(function(sentence) {
        if (sentence.length > 0) {
          return sentence.charAt(0).toUpperCase() + sentence.slice(1).toLowerCase();
        }
        return sentence;
      });

      return sentences.join('. ');
    }

  2. 0

    If you’re working with JavaScript, you could write a script to manipulate the text content programmatically. Here’s a simple example using JavaScript:

    var element = document.getElementById('myElement');
      element.textContent = element.textContent.toLowerCase().replace(/bw/g, l => l.toUpperCase());
    <div id="myElement">HOW Does That SOund?</div>
    Login or Signup to reply.
  3. 0

    Live example with pure HTML & CSS usingtext-transform:

    span {
  display: inline-block;
  text-transform: lowercase;
}

span::first-letter {
  text-transform: uppercase;
}
    <span>HOW Does That SOund?</span>

    Explanation:

    <span> is inline element

    ::first-letter only works with block or inline-block elements

    Reference:

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search