スマートフォンで使えるテキスト比較ツール

スマートフォンで使えるテキスト比較ツールを作ってみました。利用シーンはともかく、JavaScriptだけで動作するのでどこでも使えます。

• テキスト比較ツール Text Diff Tool

UIライブラリは jQuery Mobile 、テキスト比較エンジンには google-diff-match-patch を使用しています。HTML5は拍子抜けするほど簡単なので、もっと早くから勉強しておけばよかったかも。

  <section data-role="page" id="top"> 
    <header data-role="header"> 
      <h1>Text Diff Tool</h1> 
    </header> 
    <div data-role="content"> 
      <fieldset data-role="fieldcontain"> 
        <label for="old-text">Old text:</label> 
        <textarea rows="8" name="old-text" id="old-text"></textarea> 
      </fieldset> 
      <fieldset data-role="fieldcontain"> 
        <label for="new-text">New text:</label> 
        <textarea rows="8" name="new-text" id="new-text"></textarea> 
      </fieldset> 
      <p style="text-align: center;"> 
        <button data-icon="refresh" data-inline="true" id="compare">Compare</button> 
      </p> 
      <div data-role="collapsible"> 
        <h3>Result</h3> 
        <p id="diff-result"></p> 
      </div> 
      <div data-role="collapsible"> 
        <h3>Levenshtein distance</h3> 
        <p id="diff-distance"></p> 
      </div> 
    </div> 
    <footer>...</footer> 
  </section>