Вторник, 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

You have no rights to post comments

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