Generates Lorem Ipsum and provides a lorem-ipsum html element.

lorem-ipsum.js

// Usage:
//
// Get a Lorem Ipsum with 100 words (default):
// new LoremIpsum().string
// LoremIpsum.string
//
// Get a Lorem Ipsum with 200 words and without starting with "Lorem ipsum dolor sit amet...":
// new LoremIpsum({length: 200, classic: false}).string
// LoremIpsum.generate({length: 200, classic: false})
//
// Insert a lorem ipsum with 100 words in the DOM:
// <lorem-ipsum></lorem-ipsum>
//
// Insert a Lorem Ipsum with 200 words and without starting with "Lorem ipsum dolor sit amet..." in the DOM:
// <lorem-ipsum length="200" classic="false"></lorem-ipsum>

class LoremIpsum {
  constructor({length = 100, classic = true} = {}) {
    this.length = length
    this.classic = classic
  }
  
  get string() {
    if(!this.generated) this.generate()
    return this._string
  }
  
  get generated() {
    return !!this._string
  }
  
  get toString() {
    return this.string
  }
  
  generate() {
    var capitalize = true
    var length = Math.max(0, this.length - (this.classic ? this.sentence.words.length : 0))
    var parameters
    var words = (this.classic ? this.sentence.words.slice(0, this.length) : []).concat(new Array(length).fill(null).map((_, n) => {
      parameters = {
        capitalize,
        period: n + 1 == length || (!capitalize && n + 2 < length && this.random(this.rates.period))
      }
      parameters.comma = !parameters.period && this.random(this.rates.comma)
      capitalize = parameters.period

      return this.word(parameters)
    }))
    
    if(this.classic) {
      if(words.length > this.sentence.commaIndex + 1) words[this.sentence.commaIndex] += ','
      words[words.length < this.sentence.words.length ? words.length - 1 : this.sentence.words.length - 1] += '.'
    }
    
    this._string = words.join(' ')
  }
  
  word({capitalize = false, period = false, comma = false} = {}) {
    var word = this.words[Math.floor(Math.random() * this.words.length)]
    
    if(capitalize) word = word[0].toUpperCase() + word.substring(1)
    if(period) word += '.'
    if(comma) word += ','
    
    return word
  }
    
  random(rate) {
    return Math.random() <= rate
  }
  
  static generate(options) {
    return new this(options).string
  }
  
  static get string() {
    return this.generate()
  }
}

LoremIpsum.prototype.rates = {
  period: 0.2,
  comma: 0.2
}

LoremIpsum.prototype.sentence = {
  words: ['Lorem', 'ipsum', 'dolor', 'sit', 'amet', 'consectetur', 'adipiscing', 'elit'],
  commaIndex: 4
}

LoremIpsum.prototype.words = [
  'lorem', 'ipsum', 'dolor', 'sit', 'amet', 'consectetur',
  'adipiscing', 'elit', 'curabitur', 'vel', 'hendrerit', 'libero',
  'eleifend', 'blandit', 'nunc', 'ornare', 'odio', 'ut',
  'orci', 'gravida', 'imperdiet', 'nullam', 'purus', 'lacinia',
  'a', 'pretium', 'quis', 'congue', 'praesent', 'sagittis', 
  'laoreet', 'auctor', 'mauris', 'non', 'velit', 'eros',
  'dictum', 'proin', 'accumsan', 'sapien', 'nec', 'massa',
  'volutpat', 'venenatis', 'sed', 'eu', 'molestie', 'lacus',
  'quisque', 'porttitor', 'ligula', 'dui', 'mollis', 'tempus',
  'at', 'magna', 'vestibulum', 'turpis', 'ac', 'diam',
  'tincidunt', 'id', 'condimentum', 'enim', 'sodales', 'in',
  'hac', 'habitasse', 'platea', 'dictumst', 'aenean', 'neque',
  'fusce', 'augue', 'leo', 'eget', 'semper', 'mattis', 
  'tortor', 'scelerisque', 'nulla', 'interdum', 'tellus', 'malesuada',
  'rhoncus', 'porta', 'sem', 'aliquet', 'et', 'nam',
  'suspendisse', 'potenti', 'vivamus', 'luctus', 'fringilla', 'erat',
  'donec', 'justo', 'vehicula', 'ultricies', 'varius', 'ante',
  'primis', 'faucibus', 'ultrices', 'posuere', 'cubilia', 'curae',
  'etiam', 'cursus', 'aliquam', 'quam', 'dapibus', 'nisl',
  'feugiat', 'egestas', 'class', 'aptent', 'taciti', 'sociosqu',
  'ad', 'litora', 'torquent', 'per', 'conubia', 'nostra',
  'inceptos', 'himenaeos', 'phasellus', 'nibh', 'pulvinar', 'vitae',
  'urna', 'iaculis', 'lobortis', 'nisi', 'viverra', 'arcu',
  'morbi', 'pellentesque', 'metus', 'commodo', 'ut', 'facilisis',
  'felis', 'tristique', 'ullamcorper', 'placerat', 'aenean', 'convallis',
  'sollicitudin', 'integer', 'rutrum', 'duis', 'est', 'etiam',
  'bibendum', 'donec', 'pharetra', 'vulputate', 'maecenas', 'mi',
  'fermentum', 'consequat', 'suscipit', 'aliquam', 'habitant', 'senectus',
  'netus', 'fames', 'quisque', 'euismod', 'curabitur', 'lectus',
  'elementum', 'tempor', 'risus', 'cras'
]

class HTMLLoremIpsumElement extends HTMLElement {
  constructor() {
    super()
    
    this.loremIpsum = new LoremIpsum()
  }
  
  get length() {
    var length = parseInt(this.getAttribute('length'), 10)
    return isNaN(length) ? 100 : length
  }
  
  set length(v) {
    this.setAttribute('length', v)
  }
  
  get classic() {
    return this.getAttribute('classic') !== 'false'
  }
  
  set classic(v) {
    this.setAttribute('classic', v)
  }
  
  fill() {
    this.loremIpsum.length = this.length
    this.loremIpsum.classic = this.classic
    this.textContent = this.loremIpsum.string
    
    return this
  }
  
  connectedCallback() {
    this.fill()
  }
  
  attributeChangedCallback(name, oldValue, newValue) {
    if(name === 'length' || name === 'classic') this.fill()
  }
}

customElements.define('lorem-ipsum', HTMLLoremIpsumElement)