JSFiddle - React, Tailwind, and code Playground
HTML
Word list : <span id="wlist">collant, balai, couronne, coalla, koala</span>
<br/>Test word: <span id="test">colllant</span>
<br/>Results: <span id="results"></span>
<br/>
CSS
#wlist {
color: blue
}
#test {
color: green
}
#results {
color: red
}
JavaScript
function lDist(s, t) {
/* If called with a numeric `this` value
returns true if Levenshtein distance between strings s and t <= this
else
returns the Levenshtein distance between strings s and t */
return this.constructor === Number ? lDist.call(null, s, t) <= this : s.length && t.length ? Math.min(lDist(s.slice(1), t) + 1,
lDist(t.slice(1), s) + 1,
lDist(s.slice(1), t.slice(1)) + (s.charAt(0) !== t.charAt(0))) : (s.length || t.length)
};
document.getElementById('results').innerHTML = document.getElementById('wlist').innerHTML.
trim().
split(/,\s*/).
filter(lDist.bind(1, document.getElementById('test').innerHTML.trim())).
join(', ');