求助：实现文本框重复Hashtag高亮，现有代码报$未定义错误

错误原因分析 #

1. $ is not a function：WordPress默认启用jQuery的noConflict模式，会将全局$变量替换为jQuery，直接用$会触发未定义错误。
2. 重复标签收集逻辑错误：代码里dupTags.push(uTags)是错误操作，应该将当前重复的标签（value）加入数组，而非整个唯一标签集合；同时未对重复标签数组去重，会导致同一标签被多次添加。
3. 高亮时机错误：在遍历标签的循环内调用高亮方法会重复执行，效率低下且易引发异常，应在所有重复标签收集完成后统一处理。

修复步骤及代码实现 #

1. 兼容jQuery的noConflict模式 #

用自执行函数包裹代码，既保留$的使用习惯，又适配WordPress环境：

(function($) {
  // 内部代码可正常使用$
})(jQuery);

2. 修正重复标签收集逻辑 #

遍历标签时，仅当当前标签已存在于唯一数组，且未被加入重复数组时，才添加到dupTags中，避免重复记录同一标签。

3. 调整高亮执行时机 #

每次计数前先清除旧高亮，遍历完成后再统一调用高亮方法，确保效果准确且高效。

完整修复代码 #

JavaScript部分

(function($) {
  $(function() {
    $(".count-button").click(function() {
      // 清除之前的高亮状态
      $('.textarea-main').highlightTextarea('destroy');

      var text = $(".textarea-main").val();
      var tags = text.match(/(?:#)([A-Za-z0-9_](?:(?:[A-Za-z0-9_]|(?:\.(?!\.))){0,28}(?:[A-Za-z0-9_]))?)/g) || [];

      var uTags = [];
      var dupTags = [];

      $.each(tags, function(index, value) {
        if (uTags.indexOf(value) === -1) {
          uTags.push(value);
        } else {
          // 避免重复添加同一标签到重复数组
          if (dupTags.indexOf(value) === -1) {
            dupTags.push(value);
          }
        }
      });

      // 更新计数显示
      $('.text-well').html(uTags.length);
      $('.text-well-dup').html(dupTags.length);

      // 高亮重复标签（如果有）
      if (dupTags.length > 0) {
        $('.textarea-main').highlightTextarea({
          words: dupTags,
          caseSensitive: false
        });
      }
    }).trigger('click');

    $(".reset-button").click(function() {
      $(".textarea-main").val('');
      $('.text-well').html(0);
      $('.text-well-dup').html(0);
      // 重置时同步清除高亮
      $('.textarea-main').highlightTextarea('destroy');
    }).trigger('click');
  });
})(jQuery);

HTML部分（保持原结构，确保脚本加载顺序正确）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.hashtagcounter.com/wp-content/themes/freedom-pro/js/custom/jquery.highlighttextarea.min.js"></script>
<link href="https://www.hashtagcounter.com/wp-content/themes/freedom-pro/css/jquery.highlighttextarea.min.css" rel="stylesheet" />

<div class="textarea-well clearfix">
  <h3>Instagram Hashtag Counter</h3>
  <textarea class="textarea-main" rows="16"></textarea>
  <div class="buttons"><button class="count-button" type="button">Count</button><button class="reset-button" type="button">Reset</button></div>
  <div class="remaining-counter">Hashtags Counted: <span class="text-well">0</span></div>
  <div class="remaining-counter">Duplicates Counted: <span class="text-well-dup">0</span></div>
</div>

额外注意事项 #

• 必须保证jQuery脚本在highlighttextarea插件之前加载，否则插件无法绑定到jQuery对象上。
• 使用highlightTextarea('destroy')可彻底清除高亮状态，避免多次点击后出现高亮残留。

内容的提问来源于stack exchange，提问作者Timothy Davis