xbdev.net 2000 - 2024 (c) - Tutorials - Demos - Software, Game Development, Engineering, Data Mining, File Formats,Programming, Machine Learning

Thursday January 2, 2025

Home | Contact | Support | JavaScript... so much power in such a few lines of code.. | HTML5 and Javascript Example based approach ....

HTML5 and Javascript

Example based approach ....

Typo is a browser based spell check program - it was written to be as simple and as flexible as possible. It doesn't depend on any libraries and is quiet robust - importantly it can run independently in the browser (even locally).

* Very easy to add in extra features, to identify synonyms and weak words.
* Can be optimized to load libraries/dictionaries on the fly
* The lookup system can be improved to use a binary search for example (performance)
* Just for fun, there is interactive editor below, so you can type in words - error words are highlighted yellow

Try typing some words here run them through the Typo checker:

Type here

Click on the tab to select the option, edit the scripts in the output underneath (edit and play around with the implementation):

/* CSS script ... */

#myinput {
  clear: both;
  white-space: pre-line;
  line-height:1.5;
  font-family:sans-serif;
  font-size:12pt;
  display: inline-block;
  position: absolute;
  box-sizing: border-box;
  left:0;
  right:0;
  bottom:0;
  top:0;
  width: 100%; 
  max-width: 100%;
  min-height: 100%;

-webkit-text-fill-color: red;
  overflow: hidden;
  /*
  text-fill-color: transparent; 
  */
  background: transparent;  
  padding: 0;
  margin: 0;
  border: 0;
  user-select: none;
  outline: none;
  
}
#myoutput {
  clear: both;
  white-space: pre-line;
  line-height:1.5;
  font-family:sans-serif;
  font-size:12pt;
  left:0;
  right:0;
  bottom:0;
  top:0;
  display: inline-block;
  box-sizing: border-box;
  position: absolute;

user-select: none;
  color: black;
  text-fill-color: black; 
  padding: 0;
  margin: 0;
  border: 0;
  user-select: none;

}
#wrapper {
  clear: both;
  box-sizing: border-box;
  width: 100%;
  min-height:200pt;
  max-height:200pt;
  background: lightblue;
  position: relative; 
  border: 1px solid red;
  overflow: hidden;
}
/* THE OVERLAYING CONTENTEDITABLE WITH TRANSPARENT TEXT */
#wrapper > textarea:nth-child(2) {
  position: relative;
  /*
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;     
  color: black;     
*/  
}

.errorword {
  background: yellow;
  color: black;
}

/* Javascript code  .... */

function log( val )
{
	document.getElementById('log').innerHTML += val;
	document.getElementById('log').innerHTML += '<br>';
}

// Compute the distance between two strings.
const LevenshteinDistance = (str1 = '', str2 = '') => {
   const track = Array(str2.length + 1).fill(null).map(() =>
   Array(str1.length + 1).fill(null));
   for (let i = 0; i <= str1.length; i += 1) {
	  track[0][i] = i;
   }
   for (let j = 0; j <= str2.length; j += 1) {
	  track[j][0] = j;
   }
   for (let j = 1; j <= str2.length; j += 1) {
	  for (let i = 1; i <= str1.length; i += 1) {
		 const indicator = str1[i - 1] === str2[j - 1] ? 0 : 1;
		 track[j][i] = Math.min(
			track[j][i - 1] + 1, // deletion
			track[j - 1][i] + 1, // insertion
			track[j - 1][i - 1] + indicator, // substitution
		 );
	  }
   }
   return track[str2.length][str1.length];
};

class Typo
{
	wordList = []; // array of words
	cache    = {}; // quick lookup to store result from previous searches
	
	constructor(words)
	{
		this.wordList = words.split("\n");
		log( 'Typo dictionary: ' + this.wordList.length + ' words' );
	};
	
	spellCheck(word) 
	{
		if ( word in this.cache ) return this.cache[ word ];
		for (let i=0; i<this.wordList.length; i++)
		{
			if ( this.wordList[i].toLowerCase() == word.toLowerCase() )
			{
				this.cache[ word ] = true;
				return true;
			}
		}
		this.cache[ word ] = false;
		return false;
	}
	
	getSuggestions(word, limit, maxDistance) 
	{
		var suggestions = [];
		if(word != null && word.length > 0) {
			// Validate parameters.
			word = word.toLowerCase();
			if(limit == null || isNaN(limit) || limit <= 0) limit = 5;
			if(maxDistance == null || isNaN(maxDistance) || maxDistance <= 0) maxDistance = 4;
			if(maxDistance >= word.length) maxDistance = word.length - 1;
		  
		    let tmp = [];
			tmp.length = limit;
			for (let i=0; i<this.wordList.length; i++)
			{
				let dicWord = this.wordList[i].toLowerCase();
				if ( dicWord.length==0 ) continue;
				
				let dist = LevenshteinDistance( dicWord, word );

}
		return suggestions;
	}
}// End typo class

// Debug tests ...
log('Intializing Typo');

let typo = new Typo( dictWords );

log('Typo Ready! ');

log( 'check "there:"' + typo.spellCheck('there') );
log( 'check "thera:"' + typo.spellCheck('thera') );

log( 'suggestions there: ' + typo.getSuggestions('there') );
log( 'suggestions thera: ' + typo.getSuggestions('thera') );

/*
// Note extra work can be added to replace/ignore special characters
// from words, such as full stops and commas
tmp = tmp.replace(/[#,.:;?!]$/g,''); // at the end 
tmp = tmp.replace(/^[#,.:;?]/g,''); // at the start
tmp = tmp.replace(/[0-9]/g,'');
if (tmp.length < 1 ) continue;
*/

Possible extra features to add:
* Add extra checks for punctuation (e.g., ignore full stops and commas)
* Optimize the code further, so it's capable of parsing very large files
* Improve the test interface (different colors/graphics)

Resources

* Download full source code [link]
* Misc Javascript Tutorials [Link]
* Online Editor/Compiler [Link]
* Beautiful Code Highlighting [Link]

Advert (Support Website)

Visitor: