文字列の類似度を簡単に計測したい！JavaScriptを使った計測ツールを作りました。試しにどうぞ。
サンプル
文字の類似度計測ツールのサンプルをアップしました。
２つの文字を入力すると、文字の距離が数字で測定されます。
２つの文字が近いほど、距離は短くなり、数字が小さくなります。
75行しかないHTMLファイル
入力画面のHTML、CSS、JavaScript。すべて合わせて75行しかありません。
下記をコピペしてブラウザで実行すれば動作します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>テキストの距離</title> <style> input[type="text"] { font-size: 1.6em; padding: 0.3em 0; width: 30em; margin-bottom: 1em; } button { font-size: 2em; } td { padding: 10px; border: solid 1px #666; } td:first-child { background-color: #FFF9C4; font-size: 2em; } </style> </head> <body> <h1>テキストの類似度を計測します</h1> <p>0ほどテキスト内容が近く、数が多いほど遠いです。</p> <form name="form1"> <input type="text" name="text1" value=""><br> <input type="text" name="text2" value=""><br> <button onclick="clickBtn();return false;">計測</button> </form> <h1>結果</h1> <table id="result"> </table> <script type="text/javascript"> let clickBtn = function() { let text1 = form1.text1.value, text2 = form1.text2.value, dist = levenshteinDistance(text1, text2), result = document.getElementById('result'), newRow = result.insertRow(), rowData = [dist, text1, text2]; //tableに結果書き出し for (let i=0; i<rowData.length; i++) { let newCell = newRow.insertCell(), newText = document.createTextNode(rowData[i]); newCell.appendChild(newText); } return false; }, //文字列の類似度チェック levenshteinDistance = function(str1, str2) { let r, c, cost, d = []; for (r=0; r<=str1.length; r++) { d[r] = [r]; } for (c=0; c<=str2.length; c++) { d[0][c] = c; } for (r=1; r<=str1.length; r++) { for (c=1; c<=str2.length; c++) { cost = str1.charCodeAt(r-1) == str2.charCodeAt(c-1) ? 0: 1; d[r][c] = Math.min(d[r-1][c]+1, d[r][c-1]+1, d[r-1][c-1]+cost); } } return d[str1.length][str2.length]; } </script> </body> </html> |
levenshteinDistance()の関数は、レーベンシュタイン距離で文字列の類似度を高速に取得するを使わせて頂きました。
レーベンシュタイン距離について私は何も語れないので、詳しい説明は上記サイトを参考にしてください。
実行結果
ツールの実行結果を貼り付けます。
「ありがとうございます。」と、４つの文字列を比較してみました。
| 2 | ありがとうございます。 | ありがとうございました。 |
| 4 | ありがとうございます。 | おはようございます。 |
| 8 | ありがとうございます。 | いただきます。 |
| 10 | ありがとうございます。 | 目玉焼きおいしいなぁー。 |
感覚的には、納得いく結果でした。
JavaScriptでリコメンドとか、文字の類似を調べたいときの入門として、参考になるかもしれません。