Страница 1 из 1

Псевдоклассы :first-word и :last-word эмуляция на JavaScript

СообщениеДобавлено: 28 сен 2018, 21:46
Александр
В форуме по CSS выяснили, что никакая версия CSS не поддерживает псевдоклассов :first-word и :last-word, видимо это связано с нюансами парсинга многобайтных кодировок типа четырехбайтный UTF.
Так что вот реализация на чистом JavaScript «first-word» и «last-word».

Реализация псевдокласса (не путайте псевдокласс с 'псевдоэлементом') «first-word».
JavaScript pseudo-class (Don't confuse the terms 'pseudo-class' and 'pseudo-element') «:first-word» emulation:
Код: Выделить всё
function first_word(id){
    var e = document.getElementById(id);
    var s = e.innerHTML;
    var w = s.split(' '); // разбиваем строку на слова по пробелам (split the string into words by spaces)
    var fw = '<span class="first-word">'+w.shift()+'</span>';
    w.unshift(fw);
    var ns = w.join(' ');
    e.innerHTML = ns;
};


Реализация псевдокласса (не путайте псевдокласс с 'псевдоэлементом') «last-word».
JavaScript pseudo-class (Don't confuse the terms 'pseudo-class' and 'pseudo-element') «:last-word» emulation:
Код: Выделить всё
function last_word(id){
    var e = document.getElementById(id);
    var s = e.innerHTML;
    var w = s.split(' '); // разбиваем строку на слова по пробелам (split the string into words by spaces)
    var lw = '<span class="last-word">'+w.pop()+'</span>';
    w.push(lw);
    var ns = w.join(' ');
    e.innerHTML = ns;
};

Кстати, в случае «last-word», как видите, эта простая функция захватит и знак препинания в конце предложения. Но это уже дело творческое, как с этим быть.
Взято из темы Псевдокласс :first-word — точно не существует решения?
Думаю, многим пригодится.