پلاگین جاوااسکریپتی mark.js

توی این نوشته هم قراره در مورد یه ویژگی دیگه از جاوااسکریپت صحبت کنیم . پلاگینی که کلمه های کلیدی رو هایلایت میکنه .

خب همه ما میدونیم با ctrl+f میتونیم توی هر مرورگری ، هرچیزی که به دنبالش هستیم رو جستجو کنیم و پیداش کنیم اما این قابلیت در تلفن های همراه وجود نداره و ازش پشتیبانی نمیشه و در جاهایی که متن داینامیک استفاده شده به خوبی کار نمیکنه.

Mark.js یک پلاگین جاوااسکریپتی رایگان به حساب میاد که وِیژکی هایلایت کردن جستجو رو به هر صفحه ای اضافه میکنه ، mark.js به عنوان یک پلاگین vanilla جاوااسکریپت کار میکنه اما میتونه در jQuery هم اجرا بشه . ازون جایی که یک پروژه کاملا اپن سورس هست میتونید در هر پروژه ای ازش استفاده کنید .

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

برای شروع فایل mark.js رو از گیتهاب دانلود کنید ، یا برای صرفه جویی در وقت از CDN استفاده کنید .شما باید این تابع رو به یک فیلد ورودی در صفحه متصل کنید .

کلاس contex هرجایی که تابع کلمات رو جستجو کنه مورد هدف قرار میده ، اگر هم میخواید تمام صفحه رو جستجو کنه در فایل html به صورت پیش فرض از المان <body> استفاده کنین ، میتونید ویجت های مختلف و یا آیفریم ها رو داخلش قرار بدید .

حالا داخل تابع mark() keyword رو به همراه ویژگی و آپشن هایی که میخواید اضافه کنید ، اگه این اجازه رو بدید که کاربران کلمه کلیدی رو تایپ کنن میتونید تابع رو یا به صورت خودکار و یا با وارد کردن کلمه کلیدی جدید آپدیت کنید .

اگه تصمیم دارید این پلاگین رو در عمل هم ببینید ، به کد های زیر نگاهی بندازین که با یک jQuery ساده به صورت آزمایشی چند پاراگراف از یک متن نمونه رو جستجو میکنه .

کد های زیر رو به عنوان کد های 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>

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

<div class="panel-heading">Search</div>

<span>Type in a keyword:</span>

</div>

<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>

<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>

<p>

<small>Demo by <a href="https://github.com/julmot" target="_blank">Julian Motz</a></small>

</p>

</div>

مقایسه NodeJS و PHP ، نبرد برتری و بقا !

حالا برای کد های 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;
}

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: ;

}

mark {

padding: ;

}

و حالا به سراغ کد های جاوااسکریپت میریم :

$(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);

});

$(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);

});

Mark.js در همه مرورگر های کاربردی و مطرح از جمله فایرفاکس ، گوگل کروم ، اپرا و اینترنت اکسپلولر +9 کار میکند. خب این نوشته برداشت من از این وبلاگ بود و طبق معمول همیشه یه لینک دیگه هم برای آشنایی بیشتر براتون میزارم .