JavaScriptで文字の類似度を見る – てまりのユニバーサルデザイン

文字列の類似度を簡単に計測したい！JavaScriptを使った計測ツールを作りました。試しにどうぞ。

サンプル

２つの文字を入力すると、文字の距離が数字で測定されます。

２つの文字が近いほど、距離は短くなり、数字が小さくなります。

75行しかないHTMLファイル

入力画面のHTML、CSS、JavaScript。すべて合わせて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>

<!DOCTYPE html>

<head>

<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>

</table>

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でリコメンドとか、文字の類似を調べたいときの入門として、参考になるかもしれません。

サンプル

75行しかないHTMLファイル

実行結果

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル