的JavaScript/jQuery的复制文本的亮点将不会在HTML文件

我有下面的代码的HTML文件工作，我与它的问题：的JavaScript/jQuery的复制文本的亮点将不会在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/，但不工作在我的浏览器中。

我做了什么？从的jsfiddle

将代码粘贴到HTML我的文件（CSS，javascript和把它们放在HTML标签之间）
添加链接到jQuery库

当我打电话从文件本地主机（我使用XAMMP）使其正常显示，但是当我点击链接，亮点重复，没有任何反应:(在

下发展

控制台r工具（Chrome）不显示任何内容（没有错误，没有信息 - 只是空白）。

我在做什么错了？

来源

2017-10-06 Kamil Janicki

把你的脚本，在''标签的结束或（如在的jsfiddle）在'OnDomReady'事件，它应该工作。 – Scott

如果@斯科特的权利，我相信他是，问题是脚本在页面上执行的顺序。你必须想象当你看到$（..）时，它实际上是从页面获取项目，如果它在页面完成之前运行，它什么也找不到，因此什么也不做（如果没有找到项目，jQuery不执行任何操作）。 – Neil

在这种情况下使用jQuery的'$（document）.ready（function（）{/ *执行你的代码* /}）'可能是个好主意。 – tommyO

您正在运行该脚本之前的DOM准备就绪，进入DOMContentLoaded/load事件，或jQuery的内$('document').ready()和一些其他事件里面的代码，以便它执行的页面加载后，例如：

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

谢谢队友:)我使用第二种解决方案，它的工作原理。我认为对于像我这样简单的代码就足够了。 –

我需要说taht IM积极supprised怎么样快速我收到反馈。

感谢您帮助我解决我的第一个问题。我把脚本放在<body> tak的末尾，它的工作原理:)

但是我还有另外一个问题（我不知道我会把它粘贴到我自己的内容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条记录。

我需要什么？

我需要高亮显示每一个“对”包含拉链和HTML文件及其索引记录（记录不能包含扩展）的名称。

现在我不能这样做，因为在文件夹中的文件有扩展名.html和.zip文件和索引记录没有任何和脚本无法识别正确复制（我不能隐藏HTML扩展或PHP因为我需要他们）。

什么即时试图达到什么目的？

我需要直观地了解索引中是否存在索引中的某些“单独”记录或forlder中的某些单独文件未在索引中索引，并且我想象当我按下“hilight重复”时，那么每个文件都会有“对” hilighted和单独的文件或记录我索引将是白色的，所以我可以快速找到它

现在我修改脚本识别句子由新行(\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文件

回答

相关问题