Best way to Spell Check a web page [closed]

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 1 year ago.

Improve this question

When adding text to a webpage best practice would be to use localization resources, or at least copy/paste text out of a program like Word (or any other grammar/spell checker). That being said there are "always" a couple words here and there where a developer just "updates it."

My question, how do other people check for typos on their webpages? I have a solution (Which I will post as a possible answer), but looking for other ideas.

Answer 1

You can add a function in your javascript library to grab all text and put it in a textbox, which on a browser like chrome will then trigger the native spellchecker.

function SpellCheck()
{
    var ta=document.createElement('textarea'); 
    var s=document.createAttribute('style'); 
    s.nodeValue='width:100%;height:100em;'; 
    ta.setAttributeNode(s); 
    ta.appendChild(document.createTextNode(document.body.innerText)); 
    document.body.appendChild(ta); 
    ta.focus(); 
    for (var i = 1; i <= ta.value.length; i++)
        ta.setSelectionRange(i, i);
}

Code from @JohnLBevan blog post (posted on 2011/03/28)

Answer 2

I made the comment above, then I used the idea from the first answer to add this to my dev environment:

function showPageSource()
{
    var text = document.body.innerText;

    var textarea = document.createElement('TEXTAREA');
        textarea.style.position = 'absolute';
        textarea.style.opacity  = 0.95;
        textarea.style.zIndex = 999;
        textarea.style.top      = '25px';
        textarea.style.left     = '25px';
        textarea.style.width    = 'calc(100% - 50px)';
        textarea.style.height   = '500px';
        textarea.value          = text;
    document.body.appendChild(textarea);

    textarea.addEventListener('click',  function (e)
    {
        e.stopPropagation();
    }, false);

    document.body.addEventListener('click', function (e)
    {
        textarea.parentNode.removeChild(textarea);
    }, false);
}

And then a tag like this to show the sauce:

<a href="javascript:showPageSource()">SHOW PAGE SOURCE</a>

Shows a fair amount of crap from the navigation - but I can live with that.