Вторник, 10 Июля 2012 14:33

Выделение первого слова в тексте при помощи jQuery

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

В CSS есть возможность задать отдельные стили для первого дочернего элемента и для первой строки текста. Но нету подобного свойства для выделения первого слова текстовой строки или блока. Потому для этого будем использовать jQuery.

 

 

Сразу приведу весь код, потом будем его разбирать:

 

 

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style>
.first_word {color: red;}
</style>
</head>
 
<body>
<script>
$(function(){
var a = new String;
a = $('.text_cont_inner').html();
var b = a.indexOf(' '); 
if (b == -1) {
b = a.length;
}
$('.text_cont_inner').html('<span class="first_word">'+a.substring(0, b)+'</span>'+a.substring(b, a.length));
});
</script>
<div class="main_cont">
<div class="text_cont">
    <div class="text_cont_inner">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>
    </div>
</div>
</body>
</html>
 
 
В первую очередь нужно подключить jQuery:
 
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 
 
Потом пишем html - берем нужный кусок текста и ложем его в определенный блок. Задаем блоку класс, в нашем случае это text_cont_inner. С этим классом мы будем дальше работать. 
 
 
Теперь рассмотрим скрипт:
 
 
<script>
$(function(){
var a = new String;
a = $('.text_cont_inner').html();
var b = a.indexOf(' '); 
if (b == -1) {
b = a.length;
}
$('.text_cont_inner').html('<span class="first_word">'+a.substring(0, b)+'</span>'+a.substring(b, a.length));
});
</script>
 
 
Ввыдом некоторую переменную a, котором задаем значение, равное внутренностям text_cont_inner. Задаем его через .html(), а не .text(), ибо на выходе ходим первое слово обернуть span'ом, а это уже html. 
 
Далее новой переменной b задаем значение позиции первого проблема в строке a.
 
Для точности, нужно ввести проверку наличия больше, чем одного слова в нашей строке.  
 
 
if (b == -1) {
b = a.length;
}
 
Здесь используется -1, так как, если в строке будет только одно слова, то есть строка без пробелов, то b = a.indexOf(' ') выдает -1. Я проверяла)) Если пробела нет, то b у нас равно длине строки a.length.
 
И последний пункт - в наш блок с классом text_cont_inner выводим открытие span'а с определенным классом, в него подстроку от 0 до b, закрываем span и после него выводим подстроку от b до конда, т. е. до индекса a.length.
 
$('.text_cont_inner').html('<span class="first_word">'+a.substring(0, b)+'</span>'+a.substring(b, a.length));
 
 
Если в строке всего одно слово, оно просто будет лежать внутри нашего span'а. 
 
Последний штриф - для нашего нового span'а с указанным классом first_word задаем css-стили по желанию. 
 
 
Результат:
 
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry
 
 
 
Аналогично можно работать с массивом:
 
 
<script>
$(function(){
var a = [], len, i, b =  [];
len = $('.text_cont_inner').length;
for (i = 0; i < len; i++) {
a[i] = $('.text_cont_inner')[i].html();
b[i] = a[i].indexOf(' '); 
if (b[i] == -1) {
b[i] = a[i].length;
}
$('.text_cont_inner')[i].html('<span class="first_word">'+a[i].substring(0, b[i])+'</span>'+a[i].substring(b[i], a[i].length));
}
});
</script>
 
 

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry

 
 

Additional Info

Комментарии  

 
0 #10 Alex 04.05.2017 06:01
Вот рабочий пример для массива

$('.breakable_i tem_name').each (function(){
item_name = $(this).html();
other_part = item_name.index Of(' ');
if(other_part == -1)
other_part = item_name.lengt h;
$(this).html('' + item_name.subst ring(0, other_part) + '' + item_name.subst ring(other_part , item_name.lengt h));
})
 
 
0 #9 kat-khmara 17.03.2016 18:54
Надеюсь, Вам поможет статья http://kate-land.net/js-jquery/item/346-word-selecting-on-text, они как раз о множественном выборе слова)
 
 
0 #8 Артём 17.03.2016 17:55
Проблема как у Andry. Содержимое первого блока дублируется во всех последующих. При поппутке вставить код для массива вообще выдается ошибка JS.
Пожалуйста подскажите, как исправить.
 
 
0 #7 Aleksandr 02.10.2015 09:28
:-) Спасибо большое, помогло!
 
 
0 #6 Дмитрий 05.07.2015 20:21
Подскажите, при использовании массивов, ничего не меняется.
Или их как-то иначе нужно использовать, нежели как первый код в статье7
 
 
0 #5 Павел 06.09.2014 06:58
Класс!Спасибо автору!Действит ельно первая буква есть,первая строка есть,а вот первого слова НЕТ!
 
 
0 #4 kat-khmara 06.01.2014 10:01
Дописала в статье))
 
 
0 #3 Andry 31.12.2013 07:17
спасибо за ответ но...
прошу прошения за тупость но я в js полныи ноль и как правилинно писать не знаю я пробовал так


$(function(){
var a = new String;
a = $('.text_cont_inner').html();
var b = a.indexOf(' ');
if (b == -1) {
b = a.length;
}
for(i = 0; i < $('.text_cont_i nner').length; i++){
$('.text_cont_inner').html(''+a.substring(0, b)+''+a.substri ng(b, a.length));
}); но у меня не получилось :oops:
 
 
+1 #2 kat-khmara 30.12.2013 10:12
Нужно эти элементы использовать в виде массива.
Вместо
$('.text_cont_inner').html(...)
писать
for(i = 0; i < $('.text_cont_i nner').length; i++) {
$('.text_cont_inner').html(...)
}

и сами строки будут в массиве:
a = $('.text_cont_i nner').html().
 
 
0 #1 Andry 30.12.2013 05:06
если использовать несколько раз класс text_cont_inner то повторяется содержание первого блока во всех последуюших не зависимо от их содержания как это исправить
 

You have no rights to post comments

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