Skype: am4iki

mail: tаv@webzаvоd.nеt

Выделение первого слова в предложении

05 Май 2014
Теги

Если Вам нужно выделить и произвести какие-то действия над первым словом в предложении, то вам пригодится данный скрипт. В CSS к сожалению нет псевдокласса :first-word. Поэтому будем использовать JavaScript.

Скачать скрипт находится во вложении (внизу страницы), использовать скрипт очень просто:

Подключаем скрипт в head:

<script src="/firstwordselect.js" type="text/javascript"></script>
<script type="text/javascript">
    firstwordselect('p', 'text', 'firstWord');
</script>

Предположим у нас есть параграф:

<p class="text">
    Как я люблю мороженое, оно самое вкусное на свете!
</p>

В функции firstwordselect('p', 'text', 'firstWord') 1-ый аргумент и 2 - это тег и класс к которому станет использоваться скрипт, 3-ий агрумет - это класс тега <span> коим станет обрамляться 1-ое слово. В результате в последствии работы скрипта html код станет: 

<p class="text">
    <span class="firstWord">Как</span> я люблю мороженое, оно самое вкусное на свете!
</p>

В случае если на веб-сайте подключена либа jQuery то выделение первого слова можно сделать кодом:

$(document).ready(function()
{
    $('p.text').each(function() {
        var h = $(this).html();
        var index = h.indexOf(' ');
        if(index == -1) {
            index = h.length;
        }
        $(this).html('<span class="firstWord">' + h.substring(0, index) + '</span>' + h.substring(index, h.length));
    });
});

Скачать вложения:
Прочитано 1101 раз