JavaScript 英文で文字列を見比べて変化がある単語をマークする

英文の文章と文章を照らし合わせて、変化のあった単語をマークしたいです。
いろいろなパターンがあると思うので、まずは「書き換えられた単語」をマークするjsに挑戦しました。

文A
I wake up in 11 am
文B
I wake up at 11 am

この２つの文を照らし合わせると、文Aの"in"が文Bでは"at"に書き換えられています。
そこで、文Aの"in"を<span>で囲んでline-throughにし、文2の"at"のカラーを緑にする、というJSを作ります。

多分これはindexofやmatchを使えば実現できると思います。
文章をそれぞれ空白でsplitし、分割された単語たちを片方の分割される前の文章に検索かけていきます。検索されない単語が見つかれば<span>で囲み、文Aの単語ならばline-through、文Bの単語ならばcolor: green;、を付与すれば実現できるのではないかなと考えています。

文Aにはない単語を文B中に「増やした」場合にその単語をマークすることも、この方法で可能かなと思います。

しかし

文A
I wake up in 11 am and drink coffee at the kitchen
文B
I wake up at 11 am and drink coffee in the kitchen

この場合だと、at と in という単語はどちらの文章にも存在しているので、マークすることができないです。

何か良い方法がありましたら、教えていただきたいです。

yambejp

2020/07/07 07:07

処理はなんとでもなるけど、ロジックが固まっていないのでブレが対応できません。単語にわけて前から順に比較するとかですか？順番がずれたらその単語以降全部違う判定されかねないですけど

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは

ご質問にあるような、２つの文字列の差分を得たいときに便利な jsdiff というライブラリがあります。現時点で、Starの数が4.9kと、それなりに評判もよいです。以下はこれを使った例です。

html
1<div id="before"></div>
2<div id="after"></div>

css
1.removed {
2  text-decoration-line: line-through;
3  text-decoration-color: red;
4  background-color: #feebee;
5}
6
7.added {
8  color: green;
9  background-color: #e3ffeb;
10}

javascript
1const oldStr = 'I wake up in 11 am and drink coffee at the kitchen';
2const newStr = 'I wake up at 11 am and drink coffee in the kitchen';  
3const diff = Diff.diffChars(oldStr, newStr);
4
5const [beforeHtml, afterHtml] = diff.reduce(([before, after], { added, removed, value }) => {
6  if (removed) {
7    before += `<span class="removed">${value}</span>`;    
8  } else if (added) {
9    after += `<span class="added">${value}</span>`;    
10  } else {
11    before += value;
12    after += value;
13  }
14  return [before, after];
15}, ['', '']);
16
17$('#before').append(beforeHtml);
18$('#after').append(afterHtml);