のJavaScript/jQueryのテキストのハイライトは、私は以下のコードでHTMLファイルを持っていると私はそれに問題があるHTMLファイルに

を動作しません、重複：のJavaScript/jQueryのテキストのハイライトは、私は以下のコードでHTMLファイルを持っていると私はそれに問題があるHTMLファイルに

<html> 
     <head> 
     <title>TITLE</title> 
     <style type="text/css"> 
      span.duplicate { background: yellow; } 
     </style> 

     <script 
      src="https://code.jquery.com/jquery-3.2.1.js" 
      integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" 
      crossorigin="anonymous"> 
     </script> 

     <script> 
      var text = $('p').text(), 
       words = text.split(' '), 
       sortedWords = words.slice(0).sort(), 
       duplicateWords = [], 
       sentences = text.split('.'), 
       sortedSentences = sentences.slice(0).sort(), 
       duplicateSentences = []; 


      for (var i=0; i<sortedWords.length-1; i++) { 
       if (sortedWords[i+1] == sortedWords[i]) { 
        duplicateWords.push(sortedWords[i]); 
       } 
      } 
      duplicateWords = $.unique(duplicateWords); 

      for (var i=0; i<sortedSentences.length-1; i++) { 
       if (sortedSentences[i+1] == sortedSentences[i]) { 
        duplicateSentences.push(sortedSentences[i]); 
       } 
      } 
      duplicateSentences = $.unique(duplicateSentences); 

      $('a.words').click(function(){ 
       var highlighted = $.map(words, function(word){ 
        if ($.inArray(word, duplicateWords) > -1) 
         return '<span class="duplicate">' + word + '</span>'; 
        else return word; 
       }); 
       $('p').html(highlighted.join(' ')); 
       return false; 
      }); 

      $('a.sentences').click(function(){ 
       var highlighted = $.map(sentences, function(sentence){ 
        if ($.inArray(sentence, duplicateSentences) > -1) 
         return '<span class="duplicate">' + sentence + '</span>'; 
        else return sentence; 
       }); 
       $('p').html(highlighted.join('.')); 
       return false; 
      }); 
     </script> 

    </head> 

     <body> 
      <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Ut enim ad minim veniam. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum 
      </p> 
      <hr /> 
      <a class="words" href="#">Find duplicate words</a> 
      | 
      <a class="sentences" href="#">Find duplicate sentences</a> 
     </body> 
    </html>

それは次のように動作するはずです：http://jsfiddle.net/SaQAs/1/が、動作していません私のブラウザで。

私は何をしましたか？ HTML私のファイルにjsfiddleから

貼り付けコード私はからファイルを呼び出すとjQueryライブラリ

に

追加リンクを（CSSでは、JavaScriptとは、HTMLタグの間に置きます） localhost（私はXAMMPを使用しています）正しく表示されますが、ハイライトの重複のためのリンクをクリックしても何も起こりません:(

コンソール開発中rツール（Chrome）は何も表示しません（エラーはなく、情報はありません）。

私は間違っていますか？

出典

2017-10-06 Kamil Janicki

は（JSFiddleのように） '' タグの最後にスクリプトを置くか、 'OnDomReady'イベントで、それが動作するはずです。 – Scott

@ Scottの権利は、私は彼がいると信じている場合、問題はページ上のあなたのスクリプトの実行の順序です。 $（..）が表示されたら、実際にページからアイテムを取得しています。ページが完成する前に実行されていれば、何も見つからないので何もしません（jQueryはアイテムが見つからなければ何もしません）。 – Neil

この状況では、jQueryの '$（document）.ready（function（）{/ *あなたのコード* /}を実行してください。 – tommyO

ページは、例えば、ロードされた後、それが実行されるようにあなたは、DOMの準備が整う前に$('document').ready()内DOMContentLoaded/load内イベント、またはjqueryのを、あなたのコードを入力して、スクリプトを実行し、いくつかの他のイベントされています

document.addEventListener("DOMContentLoaded", function() { 
    // code here 
}); 

document.onload = function() { 
    // code here 
} 

//or in Jquery 
$(document).ready(function(){ 
    // code here 
});

それとも単に体の後にスクリプトを追加（HTMLを上から読み込まれるので、スクリプトは、身体の後に実行される）、例えば：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <!-- ... --> 
    </head> 
    <body> 
     <!-- your content here --> 
    </body> 

    <script> 
     // all your script here, after the body has loaded 
    </script> 
</html>

出典

2017-10-06 15:19:05

ありがとうございます:)私は2番目のソリューションを使用し、それは動作します。私はそれが私のような単純なコードでは十分だと思います。 –

私はtahtイム積極supprised言う必要がありますどうやってすばやく私はフィードバックを得る。

私の最初の問題を解決してくれてありがとう。私は<body>タクの最後にスクリプトを入れて、それは動作します:)

しかし、私は私自身のコンテンツbeetwen <p>を貼り付けるまで別の問題があります。

私の必要性のためのスクリプトを少し変更する必要があります。

私の内容は次のようになります。

<p> 

Folder listing with files making "pairs": 

My File.id 10.zip // file package 
My File.id 10.html/file package description 
My File.id 11.zip 
My File.id 11.html 

--- 

Index.txt of files "pairs" in folder(one line menas 2 files in folder - html and zip) every line have break `\r\n`: 

My File.id 10 
My File.id 11 

</p>

のように...フォルダで〜200個のファイル（HTML +ファスナー）について何かだろうと、インデックスに〜100のレコードになります。

私は何が必要ですか？

zipとhtmlファイルの名前とインデックス（レコードは拡張子を含むことはできません）の名前を含むすべての "ペア"をhilightする必要があります。

今のところ、フォルダ内のファイルには拡張子が.htmlと.zipで、インデックスにはレコードがありませんし、スクリプトが重複を正しく認識できません（htmlや私はそれらを必要とするので、PHP）。

何を達成しようとしていますか？

私は、索引にいくつかの "単独"レコードがあることを知っておく必要があります。インデックスに索引付けされていないforlderのいくつかのファイルは、 "hilight duplicates"を押すと想像します。私はすぐにそれを見つけることができます

今のところ私は文章を新しい行(\n)で認識するように変更されましたが、私は次に何を知っていません。ここに私の現在のコードです：

<html> 
<head> 
    <title>TITLE</title> 
<style type="text/css"> 
span.duplicate { background: yellow; } 
</style> 

</head> 


<body> 

<p> 

My File.id 10.zip 
My File.id 10.html 
My File.id 11.zip 
My File.id 11.html 

--- 

My File.id 10 
My File.id 11 

</p> 

<hr /> 
<a class="words" href="#">Find duplicate words</a> 
| 
<a class="sentences" href="#">Find duplicate sentences</a> 

<script 
    src="https://code.jquery.com/jquery-3.2.1.js" 
    integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" 
    crossorigin="anonymous"> 
</script> 

<script> 
var text = $('p').text(), 
    words = text.split('\n'), 
    sortedWords = words.slice(0).sort(), 
    duplicateWords = [], 
    sentences = text.split('\n'), 
    sortedSentences = sentences.slice(0).sort(), 
    duplicateSentences = []; 


for (var i=0; i<sortedWords.length-1; i++) { 
    if (sortedWords[i+1] == sortedWords[i]) { 
     duplicateWords.push(sortedWords[i]); 
    } 
} 
duplicateWords = $.unique(duplicateWords); 

for (var i=0; i<sortedSentences.length-1; i++) { 
    if (sortedSentences[i+1] == sortedSentences[i]) { 
     duplicateSentences.push(sortedSentences[i]); 
    } 
} 
duplicateSentences = $.unique(duplicateSentences); 

$('a.words').click(function(){ 
    var highlighted = $.map(words, function(word){ 
     if ($.inArray(word, duplicateWords) > -1) 
      return '<span class="duplicate">' + word + '</span>'; 
     else return word; 
    }); 
    $('p').html(highlighted.join('<br/>')); 
    return false; 
}); 

$('a.sentences').click(function(){ 
    var highlighted = $.map(sentences, function(sentence){ 
     if ($.inArray(sentence, duplicateSentences) > -1) 
      return '<span class="duplicate">' + sentence + '</span>'; 
     else return sentence; 
    }); 
    $('p').html(highlighted.join('<br/>')); 
    return false; 
}); 
</script> 


</body> 
</html>

出典

2017-10-07 06:55:02

のJavaScript/jQueryのテキストのハイライトは、私は以下のコードでHTMLファイルを持っていると私はそれに問題があるHTMLファイルに

答えて

関連する問題