главная

Теги:


Подсветка текста средствами jQuery

Сегодня мы вам представим новый плагин jQuery, который поможет нам реализовать подсветку слов в предложениях. Данный плагин называется replaceText. Заинтриговал? Ну что, тогда погнали!

Слово от автора

Как веб-разработчики, мы каждый день имеем дело с какими-то готовыми фичами, будь то небольшой сниппет или целый фрэймворк. Если ваша задумка не имеет специфических требований, вполне вероятно, что вы найдёте какие-то готовые фишки для решения своей задачи. Но как правило такие находки рассчитаны на широкую аудиторию.

Именно поэтому, мы стартуем серию уроков по некоторым плагинам, эффектам и продвинутым техникам. Если плагины будут небольшими, мы будет разбирать их на части и смотреть как происходит волшебство. В противном случае, будем создавать небольшие проекты для того, чтобы понять как их можно использовать в реальном мире.

Вступление

Сегодня мы сконцентрируем наше внимание на плагине replaceText:

  • Тип: плагин;
  • Технология: JavaScript [jQuery];
  • Автор: Ben Alman;
  • Функциональность: ненавязчивая замена текстового содержания;

Проблема

Замена теста не является сложной задачей. Её можно решить с помощью replace.

 // Используем replace
$("#container").text().replace(/text/g,'replacement text')

// Замена контента
var lazyFool ="entire content with text replaced externally";
$("#container").html(lazyFool);
	

Да, можно и так, но зачем использовать функции, которые делают кучу лишней работы прежде чем выдать результат.

Проблема этих двух методов заключается в том, что они проходятся по всему DOM и проверяют всё подряд - даже не текстовые блоки. Так работают функции innerHTML или html. Плагин, который мы посмотрим решает эту проблему.

Решение

Использовать плагин replaceText, который при поиске совпадений обрабатывает только текстовые блоки. Его преимущество в том, что для извлечения текста из текстового блока он использует опции nodeValue или data. Этим самым он экономит очень много времени. Мы пробегаемся по всем элементам, проверяем являются они текстовыми блоками и если да, то выполняем операции которые требуются.

Вскоре мы вскроем сам плагин, чтобы убедиться в этом.

Использование

Чем приятны плагины написанные на jQuery, так это тем, что их очень просто использовать:

$("#container").replaceText( "val", "value" );
 

Всё просто и понятно. Плагин позаботится обо всём сам.

Если вы ас в регулярных выражениях, можете писать и так:

$("#container").replaceText( /(val)/gi, "value" );
 

Вам не нужно заботиться ни о чём, т.к. этот плагин очень умный.

Вскрытие

Поскольку данный плагин занимает всего 25 строк, мы можем быстренько пробежаться по его внутренностям и посмотреть как он работает.

Вот собственно и он. Ниже я опишу всё подробнее:

$.fn.replaceText = function( search, replace, text_only ) {
  return this.each(function(){
    var node = this.firstChild,
      val,
      new_val,
      remove = [];
    if ( node ) {
      do {
        if ( node.nodeType === 3 ) {
          val = node.nodeValue;
          new_val = val.replace( search, replace );
          if ( new_val !== val ) {
            if ( !text_only && /

Ну чтож, теперь давайте пошагово:

$.fn.replaceText = function( search, replace, text_only ) {};
 

Шаг 1. Стандартное начало для плагина на jQuery. Параметры говорят сами за себя. text_ony опишу чуть ниже.

return this.each(function(){});
 

Шаг 2. this.each позволят быть уверенным, что в качестве результата может быть целая коллекция элементов.

 var node = this.firstChild,
        val,
        new_val,
        remove = [];

Шаг 3. Необходимые переменные:

  • node - содержит текстовое поле первого потомка
  • val - содержит текущее значение текстового элемента
  • new_val - содержит новое значение текстового элемента
  • remove - будет содержать элементы, которые нам следует исключить из DOM

if ( node ) {}
 

Шаг 4. Проверка на существование самого элемента и дочернего элемента, который записан в его значении.

do{} while ( node = node.nextSibling );
 

Шаг 5. В цикле пройдёмся по всем элементам и завершим его когда достигнем последнего.

 if ( node.nodeType === 3 ) {}

Шаг 6. Вот тут начинается что-то интересное. Мы обращаемся к свойству nodeType элемента, чтобы узнать его тип. 3 означает, что это текстовый элемент. Если не совсем понятно, то эту же строку можно записать так if ( node.nodeType == Node.TEXT_NODE ) {}.

 val = node.nodeValue;  
new_val = val.replace( search, replace ); 

Шаг 7. Вначале берём текущее значение текстового поля. Затем примиряем нативный метод JavaScipt replace для замены текста. Результат будет записан в переменную new_val.

if ( new_val !== val ) {}
 

Шаг 8. Выполняется только если значение изменилось.

if ( !text_only && /

Шаг 9а. Вспоминаем о параметре text_only. Вот тут он выходит на сцену. Он используется для того, чтобы выяснить содержит ли этот элемент внутри себя другие элементы. Код так же проводит быструю проверку на наличие HTML элементов внутри посредством поиска открывающейся скобки в new_val.

Если да, то TextNode вставляется перед текущим узлом, а текущий узел добавляется в массив remove.

else {
    node.nodeValue = new_val;
}
 

Шаг 9б. Если это просто текст, то вставляем в него новое значение и записываем в DOM.

remove.length && $(remove).remove();
 

Шаг 10. В конце удаляем ненужные поля из DOM. Мы делаем это в самом конце, чтобы не нарушить процессы, которые могут конфликтовать друг с другом.

Проект

Проект, который мы реализуем довольно таки прост. Требования:

  • Первое: выделить подсветкой элементы, которые будут совпадать с введёнными через текстовое поле. Использовать функциональность плагина.
  • Второе: реализовать устранение подсветки на лету. Написать для этого фрагмент кода.

Функциональность проекта будет концентрироваться на функциональности плагина и использовании его на все 100%. Помните, что это только одна из многочисленных возможностей примирения данного плагина!

HTML и CSS

 

	
		jQuery replaceText
		
	

	
    	

This page uses the popular replaceText plugin by Ben Alman. In this demo, we're using it to highlight arbitrary chunks of text on this page. Fill out the word, you're looking for and hit go.

<-- Assorted text here -->

Тут в принципе вопросов возникать не должно. Мы создаём тестовое поле и кнопки для добавления/устранения подсветки, а так же параграф с текстом.

body{
	font-family: "Myriad Pro", "Lucida Grande", "Verdana", sans-serif;
	font-size: 16px;
}

p{
	margin: 20px 0 40px 0;
}

h1{
	font-size: 36px;
	padding: 0;
	margin: 7px 0;
}

h2{
	font-size: 24px;
}

#container{
	width: 900px;
	margin-left: auto;
	margin-right: auto;
	padding: 50px 0 0 0;
	position: relative;
}

#haiz {
	padding: 20px;
	background: #EFEFEF;
	-moz-border-radius:15px;
	-webkit-border-radius: 15px;
	border: 1px solid #C9C9C9;
}

#search {
	width: 600px;
	margin: 40px auto;
	text-align: center;
}

#keyword {
	width: 150px;
	height: 30px;
	padding: 0 10px;
	border: 1px solid #C9C9C9;
	-moz-border-radius:5px;
	-webkit-border-radius: 5px;
	background: #F0F0F0;
	font-size: 18px;
}

#apply-highlight, #remove-highlight {
	padding-left: 40px;
}

.highlight {
	background-color: yellow;
}
 

Тут тоже всё должно быть понятно. Единственное, что хочу отметить это класс highlight, который будет применён для подвсветки необходимых слов.

JavaScript

Во-первых реализуем реакции на нажатие клавиш:

var searchInput = $("#keyword"),
      searchTerm,
      searchRegex;
$("#apply-highlight").click(highLight);
 

Всё очень просто. Вызываем функцию, которую напишем ниже при нажатии на клавиши.

function highLight() {
   searchTerm = searchInput.val();
   searchRegex  = new RegExp(searchTerm, 'g');
   $("#haiz *").replaceText( searchRegex, ''+searchTerm+'');
}
 

  • Начинаем с извлечения значения параграфа;
  • Далее создаём регулярное выражение;
  • Затем применяем плагин, передавая все сформированные элементы;

Вот и всё в чём нам пришлось испачкаться, делая эту работу. Хорошо, что это jQuery плагин! Я просматриваю каждый span с классом highlight для того, чтобы убрать выделение при нажатии на соответствующую кнопку. Ещё раз напоминаю, что это всего-лишь демонстрация. Для применения данного плагина вам потребуется фантазия.

Вот и всё. Мы познакомились с плагином, заглянули к нему в нутро и реализовали небольшой проект.

Источник урока: www.net.tutsplus.com/tutorials/javascript-ajax/spotlight-jquery-replacetext/

Урок Создан:2011-05-17 Просмотров:2320

Добавить комментарий:


Copyright© 2009 Hosted by Zhost