Подберите повторяющиеся слова в тексте HTML, используя JQuery или Javascript - PullRequest
Новая
       35

Подберите повторяющиеся слова в тексте HTML, используя JQuery или Javascript

0 голосов
/ 07 декабря 2018

У меня есть скрипт jquery, который совпадает с дублирующимися словами в тексте HTML.Проблема в том, что если текст, который я хочу сопоставить, имеет форму HTML, он должен быть встроен в сам скрипт кодирования.Я попытался как передать текст, который будет сопоставлен в сценарии, так и заменить текст HTML текстом textarea.Ни один из методов, кажется, не помогает.Я также попытался преобразовать несколько строк в javascript, но все еще без бюджета.Я думаю, проблема в том, что я мог что-то упустить из-за того, как мне закодировали мою строку getelementid.Вот что я сделал до сих пор: 

    var textarea = document.getElementById('p').value;
    words = textarea.split(' '),
    sortedWords = words.slice(0).sort(),
    duplicateWords = [],
    sentences = textarea.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);



$('input.words').click(function(){
    var highlighted = $.map(words, function(word){
        if ($.inArray(word, duplicateWords) > -1)
            return '<<<<' + word + '>>>>';
        else return word;
    });

    document.getElementById('p').value = highlighted.join(' ');
    return false;
});

Итак, чтобы быть ясным: с текстом внутри текстовой области этот jquery / javascript работает.Вот так: 

<input type="button" class="words" value="Find duplicate words">
|


<textarea id="p" cols="30" rows="30">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.</textarea>

Но вот как это не так: 

<input type="button" class="words" value="Find duplicate words">
|


<textarea id="p" cols="30" rows="30"></textarea>

Как мне исправить это, чтобы я мог передать любой текст в innerHTML или textarea для этой функции соответствиябыть доступным?

1 Ответ

0 голосов
/ 07 декабря 2018

По сути, проблема с тем, как написан этот код, состоит в том, что вы ссылаетесь на значение ваших переменных, как они есть, когда они объявлены (когда страница загружается), а не так, как они бы хотели, когда вы хотите, чтобы ваша функция выполнялась.Чтобы исправить это, измените их область действия на функцию щелчка и пересчитывайте их значения при каждом нажатии кнопки.Я продемонстрировал пример, просто переместив весь ваш код в функцию .click. 

$('input.words').click(function() {
  var textarea = document.getElementById('p').value;
  words = textarea.split(' '),
    sortedWords = words.slice(0).sort(),
    duplicateWords = [],
    sentences = textarea.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);

  var highlighted = $.map(words, function(word) {
    if ($.inArray(word, duplicateWords) > -1)
      return '<<<<' + word + '>>>>';
    else return word;
  });

  document.getElementById('p').value = highlighted.join(' ');
  return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<input type="button" class="words" value="Find duplicate words"> |
<textarea id="p"></textarea>
...