Пятница, 29 Января 2016 11:13

Выделение слов в тексте

Written by 
Оцени эту запись
(4 Голоса)

Всем привет!

Я очень долго не радовала своих читателей новыми статьями, но я обещаю исправиться))

Сегодня хочу показать метод выделения слова в тексте при помощи jQuery. Такое выделение будет полезно при попытке оформления отдельных слов динамического контента, стороннего контента или на выделение поискового слова на странице поиска.

 

Метод простой - мы ищем нужное слово и оборачиваем его в span с нужным классом. Мой пример создан для поиска в тексте слова "акция", но я думаю, что не составит труда изменить скрипт для поиска любого слова. Его, например, можно вставлять в переменную.

 

Допустим, у нас есть блок с текстом:

 

<div class="text_cont_inner">
Lorem Ipsum - це текст-"риба", що акция в друкарстві та дизайні. Lorem Ipsum є, фактично, стандартною "рибою" аж з XVI сторіччя, коли невідомий друкар взяв шрифтову гранку та склав на ній підбірку зразків шрифтів. "Риба" не тільки успішно пережила п'ять століть, але й прижилася в електронному верстуванні, залишаючись по суті незмінною. Вона акция в 60-их роках минулого сторіччя завдяки виданню зразків шрифтів Letraset, які містили уривки з Lorem Ipsum, і вдруге - нещодавно завдяки програмам комп'ютерного верстування на кшталт Aldus Pagemaker, які використовували різні версії Lorem Ipsum.
</div> 

 

Введем переменную, которая будет содержать html нашего блока:

 

text = $('.text_cont_inner').html();

 

Нам нужно найти в этом блоке слово "акция", причем оно может быть с большой или маленькой буквы.

Для этого будем использовать метод indexOf(), переведя предварительно весь текст в строчные буквы:

 

index = text.toLowerCase().indexOf('акция'); 

 

Теперь нам нужно изменить нашу строку = строка до слова "акция" + <span>акция</span> + строка после слова "акция". Получилось как-то так:

 

text = text.substring(0, index)+'<span class="select_word">'+text.substring(index, index+len)+'</span>'+text.substring(index+len, text.length);

 

Где len - это длина слова:

 

len = 'акция'.length;

 

Но наше слово может попадаться в тексте много раз, потому поиск по тексту нужно повторять. Повтор проходит начиная с индекса после слова и до тех пор, пока слово встечается в строке. Общий результат такой:

 

while (index != -1) {
   text = text.substring(0, index)+'<span class="select_word">'+text.substring(index, index+len)+'</span>'+text.substring(index+len, text.length);
   index = text.toLowerCase().indexOf('акция', index+len+26);
}
$('.text_cont_inner').html(text);
});

 

Где 26 - это длина нашей вставки, в данном случае это 

 

'<span class="select_word">'.length;

 

Еще нам понадобится некоторое оформление выделенного слова. Например,

 

<style>
.select_word {color: red;}
</style>
 

 

Результат:

 

Lorem Ipsum - це текст-"риба", що акция в друкарстві та дизайні. Lorem Ipsum є, фактично, стандартною "рибою" аж з XVI сторіччя, коли невідомий друкар взяв шрифтову гранку та склав на ній підбірку зразків шрифтів. "Риба" не тільки успішно пережила п'ять століть, але й прижилася в електронному верстуванні, залишаючись по суті незмінною. Вона акция в 60-их роках минулого сторіччя завдяки виданню зразків шрифтів Letraset, які містили уривки з Lorem Ipsum, і вдруге - нещодавно завдяки програмам комп'ютерного верстування на кшталт Aldus Pagemaker, які використовували різні версії Lorem Ipsum.

Вже давно відомо, що читабельний зміст буде заважати зосередитись людині, яка оцінює композицію сторінки. Сенс використання Lorem Ipsum полягає в тому, що цей текст має більш-менш нормальне розподілення літер на відміну від, наприклад, "Тут іде текст. Акция іде текст." Це робить текст схожим на акция. Багато програм верстування та веб-дизайну використовують Lorem Ipsum як зразок і пошук за терміном "lorem ipsum" відкриє багато веб-сайтів, які знаходяться ще в зародковому стані. Різні версії Lorem Ipsum з'явились за минулі роки, деякі випадково, деякі було створено зумисно (зокрема, жартівливі).

На відміну від акция думки Lorem Ipsum не є випадковим набором літер. Він походить з уривку класичної латинської літератури 45 року до н.е., тобто має більш як 2000-річну історію. Акция Макклінток, професор латини з коледжу Хемпдін-Сидні, що у Вірджінії, вивчав одне з найменш зрозумілих латинських слів - consectetur - з уривку Lorem Ipsum, і у пошуку цього слова в класичній літературі знайшов безсумнівне джерело. Lorem Ipsum походить з розділів 1.10.32 та 1.10.33 цицеронівського "de Finibus Bonorum et Malorum", написаного у 45 році до н.е. Цей трактат з теорії етики був дуже популярним в епоху Відродження. Перший рядок Lorem Ipsum, "Lorem ipsum dolor sit amet..." походить з одного з рядків розділу 1.10.32.

 

 

Additional Info

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


Защитный код
Обновить

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов