Question

嗨，我正在尝试使此代码与在textarea中插入的某些文本（键入或粘贴）一起使用，但是该代码仅与我放在textarea标记内的占位符文本一起使用。我在这里做什么错了？

$(document).ready(function() {
    
  var txt = $('#textarea').text(),
    words = txt.split(' '),
    sortedWords = words.slice(0).sort(),
    duplicateWords = []
    highlighted = [];

for (var i = 0; i<sortedWords.length-1; i++) {
    var r1 = new RegExp('^'+sortedWords[i+1]+'(\\.?)$'),
        r2 = new RegExp('^'+sortedWords[i]+'(\\.?)$')
    if (r1.test(sortedWords[i]) || r2.test(sortedWords[i+1])) {
        duplicateWords.push(sortedWords[i].replace('.', ''));
    }
}
duplicateWords = $.unique(duplicateWords);


for (var j=0, m=[]; j<words.length; j++) {
    var isDuplicate = false;
    for (var k=0; k<duplicateWords.length; k++) {
        var re = new RegExp('^'+duplicateWords[k]+'(\\.?)$');
        if (re.test(words[j])) {
            isDuplicate = true;
            break;
        }
    }
    m.push(isDuplicate);
    if (!m[j] && m[j-1]) 
        highlighted.push('</mark>');
    else if (m[j] && !m[j-1])
        highlighted.push('<mark>');
    highlighted.push(words[j]);
}
$('button.words').click(function() {$('p').html(highlighted.join(' '));
    });
$('button.clean').click(function() {$('p').text(' ');
    });
 });

textarea {
  box-sizing: border-box;
  width: 200px;
  height: 80px;
  resize: vertical;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="textarea">try to insert some text here to find repeated words on text ...</textarea>
<button class="words">find duplicate words</button><em><button class="clean">clean results</button>
<br>   
<p></p>

Answer 1

几件事：

您每次单击按钮都需要在ready中运行代码以重新检查内容。使其具有功能即可
使用.val代替.text ... text不会更新。

highlighted

全局变量通常不是一个好主意。相反，只需从新函数返回值即可。

扩展代码段以查看具有以下更改的有效示例：

$(document).ready(function() {
  function findDups() {
    var txt = $('#textarea').val(),
      words = txt.split(' '),
      sortedWords = words.slice(0).sort(),
      duplicateWords = [],
      highlighted = [];

    for (var i = 0; i < sortedWords.length - 1; i++) {
      var r1 = new RegExp('^' + sortedWords[i + 1] + '(\\.?)$'),
        r2 = new RegExp('^' + sortedWords[i] + '(\\.?)$')
      if (r1.test(sortedWords[i]) || r2.test(sortedWords[i + 1])) {
        duplicateWords.push(sortedWords[i].replace('.', ''));
      }
    }
    duplicateWords = $.unique(duplicateWords);


    for (var j = 0, m = []; j < words.length; j++) {
      var isDuplicate = false;
      for (var k = 0; k < duplicateWords.length; k++) {
        var re = new RegExp('^' + duplicateWords[k] + '(\\.?)$');
        if (re.test(words[j])) {
          isDuplicate = true;
          break;
        }
      }
      m.push(isDuplicate);
      if (!m[j] && m[j - 1])
        highlighted.push('</mark>');
      else if (m[j] && !m[j - 1])
        highlighted.push('<mark>');
      highlighted.push(words[j]);
    }
    return highlighted;
  }

  $('button.words').click(function() {
    var highlighted = findDups();
    $('p').html(highlighted.join(' '));
  });
  $('button.clean').click(function() {
    $('p').text(' ');
  });
});

textarea {
  box-sizing: border-box;
  width: 200px;
  height: 80px;
  resize: vertical;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="textarea">try to insert some text here to find repeated words on text ...</textarea>
<button class="words">find duplicate words</button><em><button class="clean">clean results</button>
<br>   
<p></p>

如何突出显示文本区域中插入的重复单词？

1 个答案: