Preventing Orphans

I am attempting to prevent single word orphans by adding a non breaking space between the last 2 words within paragraphs and headings. The script I am using however is having the s

Solution 1:

Try using html() instead of text():

$("p,h1,h2,h3,h4,h5,h6").each(function(i,e) {
  var text = $(e).html();
  text = text.split(' ');
  var lastWord = text.pop();
  text = text.join(' ') + " " + lastWord;
  $(e).html(text);
});

fiddle

Btw, there is one corner case it doesn't work for, and it's when last single word of element to be unorphaned is inside the <a>, or any other tag with attributes, like:

<p>Lorem ipsum dolor sit <a href="">amet.</a></p>

Solution 2:

The problem is that you're using .text() which gets the combined text of the element and it's decedents, not the decedent elements themselves, so when you replace the HTML with something generated from this, it doesn't include them.

You might have better luck using .contents(), taking the last text node, and replacing that with a text node, an   element and a text node representing the final word.

Solution 3:

    function noMoreLonelyWords(selector, numWords){

      // Get array of all the selected elements
      var elems = document.querySelectorAll(selector);
      var i;
      for(i = 0; i < elems.length; ++i){

        // Split the text content of each element into an array
        var textArray = elems[i].innerText.split(" ");

        // Remove the last n words and join them with a none breaking space
        var lastWords = textArray.splice(-numWords, numWords).join("&nbsp;");

        // Join it all back together and replace the existing
        // text with the new text
        var textMinusLastWords = textArray.join(" ");
        elems[i].innerHTML = textMinusLastWords + " " +  lastWords;
      }
    }

    // Goodbye lonely words
    noMoreLonelyWords("p", 2);

<div class="onePar">
  <p>This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say
    something like this:
  </p>
</div>

<div class="twoPar">
  <p>This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say
    something like this:
  </p>
</div>