要素の特定のテキストフラグメントに、色付きの波状の下線を追加したいと思います<textarea>。効果はスペルチェッカーの効果と似ています。
おそらくjqueryの助けを借りて、javascriptでこれをどのように行うことができますか？
私がhtmlマークアップに対して持っている唯一のコントロールは、javascriptを介したものです。私の最初の考えは、これらのテキストフラグメントにスタイルを追加することでしたが、私が知る限り、個々のテキストフラグメントではなく、textarea要素全体のみをスタイル設定できます。
同様の効果を達成する商用ソフトウェアがあるので、私が達成しようとしていることは可能であることを私は知っていますが、それでも私は関係するトリックが何であるかを理解しようとしています。
これがテキストエリア内で可能だとは思いません。オンラインのほとんどのWYSIWYGエディターは、テキストエリアのように作成されたコンテンツ編集可能なdivまたはiframeを使用して、これらの要素のinnerHTML内のテキストのスタイルを設定し、フロントエンドに表示します。その後、textContentを取得できます。またはdiv/iframeのinnerText。jQueryを使用すると、次のようなことができます。
<div contenteditable='true' id='editor'>this is the wrd</div>
$('#editor').html($('#editor').html().replace("wrd", "<span style='color: red;'>wrd</span>"));
まったくテストされていませんが、divのスタイルを正しく設定する必要があります。次に、$（'＃editor'）。text（）を使用してテキスト値を取得できます。
使用されているアプローチは、textareaを非表示にして、編集可能なdivを作成することです（contenteditable="true"divに属性を追加します。ブラウザーの互換性についてはよくわかりません）。キーを押すたびに、JavaScriptはすべてのコンテンツを取得し、スペルが間違っている単語を見つけて、問題のある単語の周囲にスパンを配置します。cssを使用して、単語の下に赤い波線の下線を付けます（赤い波線の小さなセグメントの画像）
それについて考えると、ユーザーがボックスの中央にテキストを入力し始めた場合に備えて、div内のカーソルの位置を追跡する必要があります。これにより、内容を変更した後、スクリプトはカーソルを正しい位置に戻します。コンテンツのブロックの終わりに。
また、キーを押すたびにtextareaの値を更新する必要があります。
[編集]
これが概念実証のjsFiddleです：http： //jsfiddle.net/tEnY8/
結論として、ボックスに入力すると、値がテキストエリアに入力され、誤った単語には下線が引かれ、赤に変わります。現時点では、最後の単語に不正としてフラグを立てるだけです。その行をコメント化し、forループのコメントを外して、isMispelled(String)関数を実装する必要があります。
[編集]
概念実証の詳細は次のとおりです。http：//jsfiddle.net/tEnY8/4/
基本的に、正しいスペルの単語の配列を設定し、ループはその単語が配列に存在するかどうかをチェックします。そうでない場合は、単語のスペルが間違っている可能性があります。
あなたが言うように、テキストエリアの1行のフォントやプロパティを編集することは実際には不可能です。
代わりに、リンク先のWebサイトが実行しているのは、編集可能なDIVを使用し、これをJavascriptといくつかの巧妙なCSSを介して非表示のテキストエリアにリンクすることです（テキストエリア自体はdisplay：noneおよびvisibility：hidden;です） 。
かなり印象的であるため、firebugを使用して彼らがどのようにそれを行ったかを確認することをお勧めします。
彼らがしていることは、<div>すべてのスタイリングを行うために使用する要素を持っていることであり、それはテキストエリアのように見えます。
この投稿はあなたがそれらの線に沿って何かをするのを助けるかもしれません：https ：//stackoverflow.com/a/3536762/349012