Easy Javascript Spellchecker

The Problem: Quickly Reviewing Multiple Web Pages for Spelling Errors

When redesigning a site, or reviewing an old site to improve content or structure I often run into neglected content. One issue is often a spell checker in a CMS was disabled because it was annoying or users by habit skipped using it.

I wanted a way to quickly review an entire site, without entering the CMS be able to spell check everything client side. I first tried to include a JavaScript dictionary library but quickly found that approach was too complicated. I settled on using the browsers own built-in spellchecker and converting everything I could into textboxes and style them as close to the original as possible. This tricks the browser into spell checking the page content.

So I often will slap this into the sites javascript so it loads on every page (on a development server NOT PRODUCTION). Then all I have to do is navigate the site and look for those red underscored text in the browser.

This lets me quickly spell check many different types of pages/content, and then if I find issues locate them in the CMS to fix.

Note Requires jQuery

Demo

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

// convert every <p> tag into a <textarea> so the browser spell checks it
function runSpellChecker() {
  $("p").each(function(index) {
    var content = $(this).text();
    var width = $(this).outerWidth();
    var height = $(this).outerHeight();
    $(this).html(
      '<textarea style="width:' +
        width +
        "px;height:" +
        height * 1.15 +
        'px;" class="spellchecked">' +
        content +
        "</textarea>"
    );
    // using a setTimeout focus on each to get the browser to run its spell checking
    setTimeout(
      function(el) {
        el.children("textarea").focus();
      },
      index * 100,
      $(this)
    );
  });
}

$(function() {
  // on docready execute the spellchecker
  runSpellChecker();
});

Optionally You can also add some css to the page, so the textboxes don't look like textboxes.

textarea.spellchecked {
  border: none;
  overflow: hidden;
}

<script>
function runSpellChecker(){
  $('.post-container p').each(function(index){
      var content = $(this).text();
      var width = $(this).outerWidth();
      var height= $(this).outerHeight();
      $(this).html('<textarea style="width:'+width+'px;height:'+height*1.15+'px;" class="spellchecked">'+content+'</textarea>');
      setTimeout(function(el) {
            el.children('textarea').focus();
        }, index * 100, $(this));
    });
    }

 $(function() {
   $('#demo-btn').click(function(){
     runSpellChecker();
     })
 });
</script>
<style>
textarea.spellchecked {
    border: none;
    overflow: hidden;
}
</style>