12

これは私が直面している問題であり、どのようにアプローチすればよいかよくわかりません。

段落があるとします:

"This is a test paragraph. I love cats. Please apply here"

そして、ユーザーが文中の単語のいずれかをクリックして、それを含む文全体を返すことができるようにしたいと考えています。

4

5 に答える 5

11

要素のないテキストのクリックを（簡単に）検出できないため、最初に段落を要素に分割する必要があります。

$('p').each(function() {
    $(this).html($(this).text().split(/([\.\?!])(?= )/).map(
      function(v){return '<span class=sentence>'+v+'</span>'}
   ));
});

次のような段落を正しく分割することに注意してください。

<p>I love cats! Dogs are fine too... Here's a number : 3.4. Please apply here</p>​

次に、クリックをバインドします。

$('.sentence').click(function(){
    alert($(this).text());
});

デモンストレーション

:英語が文間の区切りであるかどうかはわかりません。もしそうなら、もちろん正規表現に追加することができます。

于 2012-11-14T20:41:52.500 に答える
5

まず第一に、ある程度の不正確さを受け入れる準備をしてください。これは一見単純に見えるかもしれませんが、自然言語を解析しようとすることは狂気の練習です。次に、すべての文が、、、またはで区切られていると仮定.し?ます!。今のところ、インテロバングなどは忘れられます。"!"文を終わらせない、のような引用句読点も無視しましょう。

また、句読点の後に引用符を付けてみてください。そうすると、で"Foo?"終わり、"Foo?"ではなくなり"Foo?ます。

最後に、簡単にするために、段落内にネストされたタグがないと仮定しましょう。これは実際には安全な仮定ではありませんが、コードが単純化され、ネストされたタグの処理は別の問題になります。

$('p').each(function() {
    var sentences = $(this)
        .text()
        .replace(/([^.!?]*[^.!?\s][.!?]['"]?)(\s|$)/g, 
                 '<span class="sentence">$1</span>$2');
    $(this).html(sentences);
});

$('.sentence').on('click', function() { 
    console.log($(this).text()); 
});​

完璧ではありませんが（たとえば、引用句読点は壊れます）、99％の確率で機能します。

于 2012-11-14T21:11:52.747 に答える
2
  1. 文を一致させます。これには、の行に沿って正規表現を使用できます/[^!.?]+[!.?]/g。
  2. 各センテンスを、spanスパン全体に警告するためのクリック イベントを持つラッピングに置き換えます。
于 2012-11-14T20:46:17.423 に答える
0

Selection and range in JavaScriptをご覧になることをお勧めします。

現在選択されている設定を取得できるメソッド解析がないため、自分でコーディングする必要があります...

Selection Rang クロス ブラウザ ベースを取得するための Javascript ライブラリはRangyです。

于 2012-11-14T20:43:34.080 に答える
0

完全な文を取得する方法がわかりません。ただし、各単語をスペースで分割すると、これを試して単語ごとに取得できます。

     <div id="myDiv" onmouseover="splitToSpans(this)" onclick="alert(event.target.innerHTML)">This is a test paragraph. I love cats. Please apply here</div>
function splitToSpans(element){
    if($(element).children().length) 
        return;
    var arr = new Array();
    $($(element).text().split(' ')).each(function(){
    arr.push($('<span>'+this+' </span>'));
    });
    $(element).text('');
    $(arr).each(function(){$(element).append(this);});
}
于 2012-11-15T06:08:12.203 に答える