輸入商品だけど、もともとがヤフオクように考えていたため、カラーバリエーションの項目が無い。
すべてタイトル部分に色情報とかが記載されている。
データをヤフーショッピングや楽天向けに加工する際に、文字列の差分だけ強調表示するなど、なんとか視覚的にならないかと思いちょっと探してみた。
これはすばらしい!
準備は
<script src="js/diff_match_patch.js"></script>
これだけ。
元の文章(サンプル)

が、差分表示されると、

デフォルトだとこんな感じに表示される。
取り消し線は、del、強調部分はinsタグが使われているので、cssでの表示の変更も用意。
<p id="text1">iPhone XS Max用スマホケース ブラック</p> <p id="text2">iPhone XS Max用スマホケース ホワイト</p>
上記のタグ(html部分)
var text1 = $('#text1').text(); var text2 = $('#text2').text(); var dim = new diff_match_patch(); // 1つ目 var diff = dim.diff_main( text1, text2 ); $('#text1').html( dim.diff_prettyHtml(diff) ); // 2つ目 var diff = dim.diff_main( text2, text1 ); $('#text2').html( dim.diff_prettyHtml(diff) );
javascriptの部分
自分用にcssを改良
<style> del { display: none; } ins { font-weight: 600; text-decoration: none; } </style>
で、こんな感じの表示に

すごくいい!
お手軽簡単、人間に優しい。
さらにinsタグ部分が正しいか目視チェックで問題なければ、ワンクリックでバリエーション情報を保存するとかできそう。
追記
あれ、よく見たら表示される部分が逆だった。
dim.diff_main( text1, text2 )のtext1とtext2を逆にしないといけないな。
さらに追記
あまりに精度が高すぎて、ブラックとレッドの場合

なんと小さい「ツ」が一致と判断されてしまう。
自動化は難しくなってしまったけど、この精度は驚き。
山
いつも隣駅のケンタッキーに行く時に、Mobikeを使っていたけど母親が来ているため徒歩。
マンションとつながっている山を超えるとショートカットできる。

はじめて通ったけど、本気だった。
けどなにげに通行人もいる。蚊が多い。。