javascript, dummy placeholder text & images (for HTML prototyping)

_dummy.js.md

Dummy JS and it's initial code has now evolved and become: https://dummyjs.com/

Please view the updated Repo and instructions at: https://github.com/paulcollett/dummyjs

The code below isn't maintained and only here for historical purposes. Please see the repo above

Dummy.js

// Dummy.js Simple placeholder text
document.querySelectorAll('[data-dummy]').forEach(el => {
  if(el.nodeName == 'IMG') return el.src = '//placehold.it/'
    + (el.getAttribute('data-dummy') || el.parentNode.offsetWidth);

  let lib = `lorem ipsum dolor sit amet consectetur adipiscing elit nunc euismod vel
    dolor nec viverra nullam at auctor enim id condimentum odio in laoreet libero
    libero a tincidunt est sagittis id curabitur vitae`
    .split(' ').sort(() => 0.5 - Math.random())
    .slice(0, +el.getAttribute('data-dummy') || 10).join(' ');

  el.innerHTML += lib.charAt(0).toUpperCase() + lib.slice(1);
});

usage.html

<h3 data-dummy></h3> <!-- defaults to 10 words -->
<p data-dummy="150"></p> <!-- output 150 words -->
<p data-dummy="2">Some prefixed text: </p>
<img data-dummy="200x100" />
<img data-dummy /> <!-- will be the size of the parent element -->