Question

我有一个包含以下代码的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库链接

当我从localhost调用文件时（我使用XAMMP）它正确显示但是当我点击链接突出重复时，没有任何反应：（

开发人员工具中的控制台（Chrome）没有显示任何内容（没有错误，没有信息 - 只是空白）。

我做错了什么？

Answer 1

在DOM准备好之前运行脚本，在# ratio test as per Lowe's paper for i,(m,n) in enumerate(matches): if m.distance < 0.7*n.distance: matchesMask[i]=[1,0] good.append(m) dst_pt = [ kp2[m.trainIdx].pt for m in good ] print(dst_pt) / DOMContentLoaded事件中输入代码，或在load内输入jquery以及其他一些事件，以便在执行之后执行页面已加载，例如：

$('document').ready()

或者只是在正文后添加脚本（因为从顶部读取html，脚本将在正文后面运行），例如：

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

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

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

Answer 2

我需要说的是，我很快就得到了反馈的速度。

感谢您帮我解决我的第一个问题。我把脚本放在<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 + zip），并且在索引中会有~100条记录。

我需要什么？

我需要在每个＆＃34;对＆＃34;其中包含zip和html文件的名称及其在索引中的记录（记录不能包含扩展名）。

现在我无法做到这一点，因为文件夹中的文件扩展名为.html和.zip，索引中的记录没有任何内容，而且脚本无法正确识别重复内容（我可以＆＃39 ; t隐藏html或php中的扩展名，因为我需要它们。）

我想要实现的目标是什么？

我需要在视觉上知道是否有一些＆＃34;单独＆＃34;记录索引或索引中没有索引的forlder中的一些单独文件，我想当我按下＆＃34; hilight duplicates＆＃34;然后每个文件都有＆＃34;配对＆＃34;将是高亮的单独的文件或记录我索引将是白色的，所以我可以很快找到它

现在我修改了脚本来识别新行(\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>

JavaScript / jQuery重复文本突出显示无法在HTML文件中工作

2 个答案: