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

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

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

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

خوشبختانه برای این کار یک لایبرری به‌نام Mark.js وجود دارد که یک پلاگین جاوااسکریپ رایگان است و ویژگی هایلایت کردن جستجو را به‌راحتی به هر صفحه‌ای اضافه می‌کند (به‌طور پیش‌فرض، Mark.js به‌عنوان یک پلاگین Vanilla جاوااسکریپت کار می‌کند اما همچنین می‌تواند در jQuery نیز اجرا شود).

Mark.js یک پروژۀ کاملاً اپن‌سورس است بنابراین دست شما باز است تا آن‌را در هر پروژه‌ای -از شخصی گرفته تا تجاری یا موارد دیگر- استفاده کنید.

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

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

<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. هرجایی که فانکشن باید کلمات را جستجو کند مورد هدف قرار می‌دهد؛ اگر می‌خواهید تمام صفحه را جستجو کنید، می‌توانید در HTML به‌طور دیفالت از المان <body> استفاده کنید یا می‌توانید المان‌های ترکیبی مثل ویجت‌های مختلف یا آیفریم‌ها را داخل آن بگنجانید.

سپس داخل فانکشن ()mark کلمۀ‌کلیدی یا keyword را به همراه آپشن‌هایی که می‌خواهید اضافه کنید (اضافه کردن آپشن‌ها اختیاری است). اگر اجازه دهید تا کاربران کلمهٔ کلیدی را تایپ کنند، سپس می‌توانید فانکشن را به‌طور خودکار با هر بار وارد کردن کلمۀ کلیدی جدید آپدیت کنید. 

در پایان هم لازم به‌ذکر است که لایبرری Mark.js در تمام مرورگرهای مطرح از جمله کروم، فایرفاکس، اپرا (v12+) و اینترنت اکسپلورر (+9) کار می‌کند. 

منبع


سحر شاکر