パフォーマンスを犠牲にすることなく、テキスト内でクリックされた単語を効率的に検出するにはどうすればよいですか?

絞り込みを使用してクリックされた単語を検出する

ユーザーによるテキストとの対話を強化するために、ユーザーがクリックした単語を検出する必要が生じます。これに対処する解決策の 1 つは、jQuery を使用した広範なクラス解析を必要とし、動作が遅く、見た目に魅力のないユーザー エクスペリエンスを生み出しました。より洗練されたアプローチを求めて、洗練されたソリューションを詳しく見てみましょう。

次の JavaScript コードは、不要なスパンでドキュメントを乱雑にすることなく単語検出を実現する合理化された方法を提供します。

<code class="js">$(".clickable").click(function(e){
         s = window.getSelection();
         var range = s.getRangeAt(0);
         var node = s.anchorNode;
         
         // Find starting point
         while(range.toString().indexOf(' ') != 0) {                 
            range.setStart(node,(range.startOffset -1));
         }
         range.setStart(node, range.startOffset +1);
         
         // Find ending point
         do{
           range.setEnd(node,range.endOffset + 1);

        }while(range.toString().indexOf(' ') == -1 &amp;amp;&amp;amp; range.toString().trim() != '');
        
        // Alert result
        var str = range.toString().trim();
        alert(str);
       });</code>

HTML ドキュメントでは、「クリック可能」クラスでテキスト ブロックを識別します。

<code class="html">&lt;p class=&quot;clickable&quot;&gt;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rutrum ante nunc. Proin sit amet sem purus. Aliquam malesuada egestas metus, vel ornare purus sollicitudin at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer porta turpis ut mi pharetra rhoncus. Ut accumsan, leo quis hendrerit luctus, purus nunc suscipit libero, sit amet lacinia turpis neque gravida sapien. Nulla facilisis neque sit amet lacus ornare consectetur non ac massa. In purus quam, imperdiet eget tempor eu, consectetur eget turpis. Curabitur mauris neque, venenatis a sollicitudin consectetur, hendrerit in arcu.
&lt;/p&gt;</code>

このコードを使用すると、ページの任意の部分でクリックされた単語を検出でき、パフォーマンスを損なうことなく、より自然なユーザー インタラクションが提供されます。 .

以上がパフォーマンスを犠牲にすることなく、テキスト内でクリックされた単語を効率的に検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。