Изменение каждой нечётной строки теста на странице

#javascript #html #dom

Добрый день , подскажите как в тексте на странице в теге 
 можно осуществить поиск
конца строки, чтобы была возможность менять каждую нечётную строку текста.
То есть

Текст Текст Текст Текст Текст Текст Текст Текст 
*Текст Текст Текст Текст Текст Текст Текст Текст* 
Текст Текст Текст Текст Текст Текст Текст Текст
*Текст Текст Текст Текст Текст Текст Текст Текст*
 

    

Ответы

Ответ 1

Почему бы нет. 

Пример:



$(".stripe").each(function(){
  var obj = $(this);
  var html = obj.html().replace(/(\S+\s*)/g, "$1");
  obj.html(html);
});

function highlight(){
    var offset = 0;
    var colorIndex = 0;
    var colors = ["#ccc","#000"];
    var spans = $(".stripe span");
    
    for(var i = 0; i < spans.length; i++){
        var newOffset = spans[i].offsetTop;  
        
        if(newOffset !== offset){
            colorIndex = colorIndex === 0 ? 1 : 0;
            offset = newOffset;
       }
        
       spans[i].style.color = colors[colorIndex];
    }
}

highlight();
$(window).on("resize", highlight);
body {
    font: 13px/1.5 sans-serif;
}


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dui diam, euismod
et pretium at, lacinia condimentum leo. Aenean interdum mi nec metus elementum vel
aliquet lorem porttitor. Morbi facilisis sollicitudin libero, id tincidunt lectus convallis
faucibus. Curabitur bibendum massa vel tortor rutrum dictum. Donec sit amet sapien
eros. Fusce nisi est, vulputate eu pulvinar sed, facilisis a massa. Suspendisse vitae
nibh non ante facilisis tristique.

Nunc laoreet, orci eu consectetur bibendum, neque purus auctor justo, nec placerat
metus massa in risus. Morbi gravida ultrices nisi, nec faucibus nulla tincidunt eu.
Quisque tristique quam non dui sollicitudin blandit tincidunt ante vehicula. Donec
massa justo, mollis ut ultricies et, eleifend non nisi. Nullam fermentum interdum ipsum
eu elementum. Phasellus vel dui eget ante vehicula adipiscing vel a mauris. Curabitur
vitae ipsum sed magna ultrices scelerisque. Ut orci diam, scelerisque pellentesque
dapibus vitae, vestibulum nec quam. Maecenas vestibulum vulputate adipiscing.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas. Nunc molestie aliquet vehicula. Aliquam porttitor vestibulum felis vitae consectetur.
Etiam ac urna at felis lobortis tristique. Maecenas nibh elit, elementum et dictum
id, viverra non lectus. Donec hendrerit gravida libero. Duis quis nisi et risus tristique
bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Ut accumsan semper magna vel iaculis. Phasellus sagittis tristique orci
non placerat. Vivamus felis nibh, semper eu placerat sed, hendrerit vitae odio. Praesent
fermentum congue fringilla. Aliquam dolor mauris, tempor eu luctus ac, feugiat ac nibh.
Sed non orci lorem.

Quisque ut odio nunc. Duis vel felis nulla. Aliquam rutrum lorem in libero facilisis
tristique in vitae dolor. Ut odio eros, suscipit nec egestas eu, gravida suscipit lectus.
Suspendisse sed urna quam. Fusce quis sagittis tellus. Cras eleifend euismod ultrices.
Fusce egestas orci eu erat hendrerit at eleifend dolor ullamcorper.

Donec a mauris mi. In posuere rutrum tristique. Aliquam erat volutpat. Aliquam ante
mi, mattis at facilisis cursus, porta id augue. Morbi feugiat, odio eget imperdiet
facilisis, ligula tellus eleifend magna, sagittis imperdiet mi neque vitae erat. Pellentesque
condimentum convallis ligula, a sollicitudin neque porttitor vel. Mauris adipiscing
pharetra justo, ac molestie ante congue vitae. Vestibulum a est arcu, in laoreet justo.
Cras tincidunt eros id ipsum vulputate eu pulvinar odio fermentum.



Ответ 2

Элементарно - берём содержимое p (innerHTML), разделяем содержимое по переносу строки
(split("\n")), проходим по массиву (map), если индекс чётный (делится на 2 без остатка)
- пропускаем, иначе строка нечётная и мы может поменять её. Дальше склеиваем изменённый
массив опять по переносу строки (join) и вставляем контент в p:



let p = document.querySelector('p'),
    data = {
      1: ['Merry', 'christmas'],
      3: ['And happy', 'new year']
    };

p.innerHTML = p.innerHTML.split(`\n`).map((e, i) => i % 2 !== 0 ? `${data[i][0]}
| ${e} | ${data[i][1]}` : e).join(`\n`);
Текст Текст Текст Текст Текст Текст Текст Текст 
*Текст Текст Текст Текст Текст Текст Текст Текст* 
Текст Текст Текст Текст Текст Текст Текст Текст
*Текст Текст Текст Текст Текст Текст Текст Текст*



Ответ 3

Можно сделать в js. Алгоритм:


Предварительно каждое слово оборачиваем в span
Проходим в цикле по всем span и окрашиваем в один цвет
До тех пор, пока очередной span не начинает располагаться ниже предыдущего
Его и все последующие окрашиваем в другой цвет
До тех пор, пока очередной span не начинает располагаться еще ниже
Скрипт запускаем при ресайзе окна, с небольшой задержкой для производительности


Рабочий пример: http://jsfiddle.net/gambala/j0Lbu7ow/

Ответ составил по аналогичному на иностранном Stack Overflow: https://stackoverflow.com/questions/15830449/how-to-target-alternate-odd-even-text-lines