JSFiddle - React, Tailwind, and code Playground

by nipheon

HTML

<div id="container"></div>

CSS

#container {text-align:justify; width: 450px; font-family: Verdana, Geneva, sans-serif;}

JavaScript

placeholder = function(numberOfWords) {

    var validChars = 'qwertzuiopasdfghjklyxcvbnm'; // all chars
    var placeholderText = '';
    var count = 0; // word count

    function addSentence(numWords) {

        placeholderText += validChars[Math.floor(Math.random() * validChars.length)].toUpperCase(); // first word in sentence is always  uppercase
        for (var j = 0; j <= numWords; j++) {

            var numChars = Math.floor(Math.random() * 12 + 1); // 1- 12 chars per word
            addWords(numChars);

        }
        placeholderText = placeholderText.slice(0, -1); // need to remove one excessive space when sentence is finished
        placeholderText += '. ';

        if (Math.random() < 0.15) {
            placeholderText += '</br>'; // 15% chance of linebreak
            if (Math.random() < 0.50) {
                placeholderText += '</br>'; // 50% chance of another linebreak (paragraph)
            }

        }

    }

    function addWords(numChars) {

        if (Math.random() < 0.05) {
            placeholderText += validChars[Math.floor(Math.random() * validChars.length)].toUpperCase(); // 5% chance of uppercase word
            numChars--;
        }

        for (var foo = 0; foo <= numChars; foo++) {

            placeholderText += validChars[Math.floor(Math.random() * validChars.length)];

        }
        placeholderText += ' ';
        count++; // counting words

    }

    while (count <= numberOfWords) {

        var numWords = Math.floor(Math.random() * 5 + 3); // 3-8 words per sentence
        addSentence(numWords);

    }


    return placeholderText;



};


$(document).ready(function() {

    $('#container').html(placeholder(500));

});