使用 JQuery 或 Javascript 匹配 HTML 文本中的重复单词答案

【问题标题】：Match Duplicate Words in HTML Text Using JQuery or Javascript使用 JQuery 或 Javascript 匹配 HTML 文本中的重复单词
【发布时间】：2018-12-06 23:52:16
【问题描述】：

我有一个匹配 HTML 文本中重复单词的 jquery 脚本。问题是如果我要匹配的文本是 HTML 格式，它必须嵌入到编码脚本本身中。我已经尝试将要匹配的文本传输到脚本中，也尝试用 textarea 文本替换 HTML 文本。这两种方法似乎都没有帮助。我还尝试将一些字符串转换为 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;
});

所以要明确一点：在 textarea 中使用文本，这个 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 中，以便可以访问此匹配函数？

【问题讨论】：

当文本在 html 中时这有效的原因是因为您在页面加载后立即获得 textarea 的值。如果您希望它动态工作，您必须在 onclick 函数中获取 p 的值

标签： javascript jquery html match word

【解决方案1】：

本质上，这段代码的编写方式的问题在于，您引用的是变量的值，因为它们在声明时（页面加载时），而不是在您希望函数执行时。要解决此问题，请将其范围更改为单击功能，并在每次单击按钮时重新计算它们的值。我已经演示了一个示例，只是将您的所有代码移至.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>

【讨论】：