Mark.js: پلاگین جاوااسکریپتی که کلمات کلیدی را هایلایت می‌کند

شاید تا‌ به‌ حال دقت کرده باشید که مرورگرها کلمات کلیدی جستجو شده را هایلایت می‌کنند تا کاربر به‌ خوبی متوجه شود که کدام بخش صفحه دقیقاً کلمهٔ مورد جستجو را دارا است که اگر بخواهید آپشن‌های اضافی دیگری به جستجوی‌ خود اضافه کنید یا در مرورگرهای موبایل هم از چنین فیچری استفاده کنید، Mark.js لایبرری مناسبی برای این‌ کار است.

اکثر مرورگرها با قابلیت CTRL + F می‌توانند هر چیزی که کاربر به‌ دنبال آن است را جستجو و پیدا کنند اما این قابلیت در موبایل پشتیبانی نمی‌شود و در جاهایی که متن داینامیک استفاده شده است (مانند آیفریم‌ها) خیلی خوب کار نمی‌کند.

Mark.js یک پلاگین جاوااسکریپی اپن‌سورس و رایگان است که ویژگی هایلایت کردن جستجو را به‌ راحتی به هر صفحه‌ای اضافه می‌کند. این پلاگین بسیار شبیه به ویژگی‌های سرچ مرورگرها است و علاوه‌ بر آن، قابلیت‌های مفید دیگری نیز دارد به طوری که مثلاً می‌توانید فیلترهای مد نظر خود را به آن اضافه کرده و کلمات را بر اساس نظم‌شان، مترادف‌های خاص یا حتی در صفحات داینامیک مانند آیفریم‌ها جستجو کنید.

راهنمای استفاده از Mark.js
چنانچه می‌خواهید کاربرد این لایبرری را در عمل ببینید، نگاهی به کدهای زیر بیندازید که با استفاده از یک جی‌کوئری بسیار ساده، به‌ طور آزمایشی چند پاراگراف از متن Lorem Ipsum را جستجو می‌کند:

<h2><a href="https://markjs.io/" target="_blank">mark.js</a> example with jQuery</h2>

<div class="panel panel-default">
  <div class="panel-heading">Search</div>
  <div class="panel-body">
    <div class="search row">
      <div class="col-xs-6">
        <span>Type in a keyword:</span>
        <input type="text" name="keyword" class="form-control input-sm" placeholder="Lorem ipsum...">
      </div>
      <div class="col-xs-6">
        <span>Search options:</span>
        <input type="checkbox" name="opt[]" value="separateWordSearch" checked> separate word search
        <br>
        <input type="checkbox" name="opt[]" value="diacritics" checked> diacritics
        <br>
        <input type="checkbox" name="opt[]" value="debug"> debug
        <br>
        <span>There are a lot more <a target="_blank" href="https://markjs.io/configurator.html">options</a>!</span>
      </div>
    </div>
  </div>
</div>


<div class="panel panel-default">
  <div class="panel-body context">
    <p>
      Lorem ipsum dolor sit āmet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, nò sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie çonsequat, vel illum dolore
      eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit prāesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
    </p>
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-body">
    <p>
      <small>Demo by <a href="https://github.com/julmot" target="_blank">Julian Motz</a></small>
    </p>
  </div>
</div>

در ادامه اقدام به نوشتن کدهای CSS می‌کنیم:

body {
  margin: 15px;
}

div.search span,
div.search input[name="keyword"] {
  display: block;
}

div.search input[name="keyword"] {
  margin-top: 4px;
}

div.panel {
  margin-bottom: 15px;
}

div.panel .panel-body p:last-child {
  margin-bottom: 0;
}

mark {
  padding: 0;
}

حال کدهای JS را تکمیل می‌کنیم:

$(function() {

  var mark = function() {

    // Read the keyword
    var keyword = $("input[name='keyword']").val();

    // Determine selected options
    var options = {};
    $("input[name='opt[]']").each(function() {
      options[$(this).val()] = $(this).is(":checked");
    });

    // Remove previous marked elements and mark
    // the new keyword inside the context
    $(".context").unmark({
      done: function() {
        $(".context").mark(keyword, options);
      }
    });
  };

  $("input[name='keyword']").on("input", mark);
  $("input[type='checkbox']").on("change", mark);

});

منابع مورد نیاز برای پیاده‌سازی کدهای فوق هم عبارتند از:

- jquery-latest.min.js
- bootstrap.min.js
- bootstrap.min.css
- jquery.mark.min.js

سازوکار این پلاگین بدین صورت است که کلاس contex. هر جایی که باید کلمات جستجو شوند را مورد هدف قرار می‌دهد به طوری که اگر می‌خواهید تمام صفحه را جستجو کنید، می‌توانید به‌ طور دیفالت از اِلِمان <body> استفاده کنید یا می‌توانید اِلِمان‌های ترکیبی مثل ویجت‌های مختلف یا آیفریم‌ها را داخل آن بگنجانید. سپس داخل فانکشن ()mark کلمۀ‌ کلیدی (Keyword) را به همراه آپشن‌هایی که می‌خواهید اضافه کنید. 

در پایان هم لازم به‌ ذکر است که لایبرری Mark.js در تمام مرورگرهای مطرح از جمله کروم، فایرفاکس، اپرا و غیره ساپورت می‌شود.