javascript - 使用 mark.js 突出显示仅适用于 1-3 个字母

Question

我正在尝试在页面上实现mark.js，但它无法正常工作。所以我设置了一个非常基本的页面，并从这个 jsfiddle 页面中提取了所有代码，但是它一次只会突出显示某些 1-3 个字母，具体取决于我输入的内容。任何人都可以看到我做错了什么? 我的页面位于此处。

代码：

$(function() {

      // the input field
      var $input = $("input[type='search']"),
        // clear button
        $clearBtn = $("button[data-search='clear']"),
        // prev button
        $prevBtn = $("button[data-search='prev']"),
        // next button
        $nextBtn = $("button[data-search='next']"),
        // the context where to search
        $content = $(".content"),
        // jQuery object to save <mark> elements
        $results,
        // the class that will be appended to the current
        // focused element
        currentClass = "current",
        // top offset for the jump (the search bar)
        offsetTop = 50,
        // the current index of the focused element
        currentIndex = 0;

      /**
       * Jumps to the element matching the currentIndex
       */
      function jumpTo() {
        if ($results.length) {
          var position,
            $current = $results.eq(currentIndex);
          $results.removeClass(currentClass);
          if ($current.length) {
            $current.addClass(currentClass);
            position = $current.offset().top - offsetTop;
            window.scrollTo(0, position);
          }
        }
      }

      /**
       * Searches for the entered keyword in the
       * specified context on input
       */
      $input.on("input", function() {
        var searchVal = this.value;
        $content.unmark({
          done: function() {
            $content.mark(searchVal, {
              separateWordSearch: true,
              done: function() {
                $results = $content.find("mark");
                currentIndex = 0;
                jumpTo();
              }
            });
          }
        });
      });

      /**
       * Clears the search
       */
      $clearBtn.on("click", function() {
        $content.unmark();
        $input.val("").focus();
      });

      /**
       * Next and previous search jump to
       */
      $nextBtn.add($prevBtn).on("click", function() {
        if ($results.length) {
          currentIndex += $(this).is($prevBtn) ? -1 : 1;
          if (currentIndex < 0) {
            currentIndex = $results.length - 1;
          }
          if (currentIndex > $results.length - 1) {
            currentIndex = 0;
          }
          jumpTo();
        }
      });
    });

标签： javascriptjquery

Answer 1

This ended up being an encoding issue. Adding:

<meta charset="UTF-8">

resolved the problem.