Технический сбой

Сайт временно работает в режиме только для чтения, идут восстановительные работы. Приносим свои извинения за неудобства.
DLE FAQ » Сниппеты » JS Сниппеты » Раскрашиваем буквы в тексте с помощью jQuery

Раскрашиваем буквы в тексте с помощью jQuery

     28.03.2013    jquery, сниппет    JS Сниппеты    6065

Простенький скрипт для раскраски букв в слове в разные цвета
CSS:

.splitWord .char1  {color:red;}
.splitWord .char2  {color:green;}
.splitWord .char3  {color:blue;}
.splitWord .char4  {color:yellow;}
.splitWord .char5  {color:orange;}
.splitWord .char6  {color:yellowgreen;}
.splitWord .char7  {color:cyan;}
.splitWord .char8  {color:gold;}
.splitWord .char9  {color:pink;}
.splitWord .char10 {color:magenta;}


HTML: 
<h2 class="splitWord">Lorem Ipsum</h2>


JS: 
// Заворачиваем буквы в span
$('.splitWord').children().andSelf().contents().each(function() {
    if (this.nodeType == 3) {
        $(this).replaceWith($(this).text().replace(/(\w)/g, "<span class='char'>$&</span>"));
    }
});

// Добавляем классы .char1, .char2, .char3, ...

$('.splitWord').each(function() {
    $('span.char', this).each(function(i) {
        i = i+1;            
        $(this).addClass('char' + i);
    });
});
Демо

6 комментариев

shamanim
Юзер

shamanim - -

если подобрать цвета градиента, будет смотреться лучше ;)
ПафНутиЙ
Админ

ПафНутиЙ - -

Это лишь сниппет)
раскрасить можно как угодно)
Каков вопрос - таков и ответ. Просто помните об этом.
Gopr
Юзер

Gopr - -

Возможно ли применить такое для тегов?
Есть облако тегов, пример: тег1, тег2, тег3, тег4, тег5, тег6, тег7, тег8, тег9, и тд...
Как сделать так: тег1, тег2, тег3, тег4, тег5, тег6, тег7, тег8, тег9, и тд...???
ПафНутиЙ
Админ

ПафНутиЙ - -

Каков вопрос - таков и ответ. Просто помните об этом.
Дмтрий Антонов
Юзер

Дмтрий Антонов - -

Друзья подскажите пожалуйста как быть если текст русский? Этот плагин с ним не работает. Как произвести транслитерацию?
alexvorojbit
Юзер

alexvorojbit - -

Здравствуйте, подскажите пожалуйста, как можно покрасить буквы из параграфа, задавая значение в инпут и нажимая кнопку буттон. На пример если в инпут пишем Red и Green, тогда в ответе должно получиться Green через одной буквы. А если задаем 3 цвета тогда абсолютно все буквы должны иметь разные цвета, тоесть рандом и чтобы 2 буквы рядом не имели тот же цвет? И чтобы инпут мог определить на пример: #FFFFFF, rgb и rgba.

Огромное спасибо!
Server restriction: dle-faq.ru Server restriction: www.dle-faq.ru ------ LICENSE FILE DATA ------- VU009X5YSAjbcTro6oQIH1pF0S0tHxw6 X3utgKa7k/J1knblsjqyrOfrKZkgtoH/ zjlbst4p/kmDl5KZkd2dnt5KCGOclpIJ f15Iv1BnJzXfiaZG1x35jbi5OyKhVog3 jd7sUxVMvMgUO2gUyN1fsV9o0h27MrO3 UanDBpzJbgVvUjZys0NIDuOtCgzaFIKA 3HWMRbEgADHgY0K1T7ns1t0vCFW7aDKF 5DuZpCjs2D5tIyIrfctUB1i5WiSouPDg vl2Qsrzc0NrTJ+ebSEUrnhyDjWMy7rQA Pn3LGNCiOmMRuIOLBp+NmN7hL2k/JSzd JpeoQ5gzGRR8zt7F5ZIdIcZuTfZ8+/zD dI6KQJJeu0HsU7Ra3AXJU0EkiXg8vjtd Tq6ebBesu4jGLfslfVw01bJRQz1+/OtW EmutMaoSt+S6Goja5MvWrBxW3c3v8pTF HYfzbGtLJynavG9SpPrXEFKakmD92uVk lFhOxFVAbiCq0JS8K6p3 -------------------------------- Server restriction: dle-faq.ru Server restriction: www.dle-faq.ru ------ LICENSE FILE DATA ------- VU009X5YSAjbcTro6oQIH1pF0S0tHxw6 X3utgKa7k/J1knblsjqyrOfrKZkgtoH/ zjlbst4p/kmDl5KZkd2dnt5KCGOclpIJ f15Iv1BnJzXfiaZG1x35jbi5OyKhVog3 jd7sUxVMvMgUO2gUyN1fsV9o0h27MrO3 UanDBpzJbgVvUjZys0NIDuOtCgzaFIKA 3HWMRbEgADHgY0K1T7ns1t0vCFW7aDKF 5DuZpCjs2D5tIyIrfctUB1i5WiSouPDg vl2Qsrzc0NrTJ+ebSEUrnhyDjWMy7rQA Pn3LGNCiOmMRuIOLBp+NmN7hL2k/JSzd JpeoQ5gzGRR8zt7F5ZIdIcZuTfZ8+/zD dI6KQJJeu0HsU7Ra3AXJU0EkiXg8vjtd Tq6ebBesu4jGLfslfVw01bJRQz1+/OtW EmutMaoSt+S6Goja5MvWrBxW3c3v8pTF HYfzbGtLJynavG9SpPrXEFKakmD92uVk lFhOxFVAbiCq0JS8K6p3 --------------------------------
  • Puxlik | Telegram Sender 13
    Фото Puxlik
    Puxlik
    Telegram Sender
    Версию 17.1 поддерживает ?
  • TeraMoune | Не загружается изображение [Ошибка HTTP] ... 2
    Фото TeraMoune
    TeraMoune
    Не загружается изображение [Ошибка HTTP]. Как исправить?
    В этой версии есть фрагментация загрузки файла когда загружаемый файл разделяется на фрагменты, по умолчанию 1 фрагмент 1.5мб. (И у вас написано лимиты на файл 4мб и картинки 5.86мб, этого достаточно чтобы принимать 1.5мб фрагменты) И если бы была проблема с весом или чем-то подобным то об этом бы сервер сообщил. Сервер отдал 500 ошибку это значит что угодно, нужно смотреть ответ от сервера в консоли разработчика или логах.
  • RedFox | Не загружается изображение [Ошибка HTTP] ... 2
    Фото RedFox
    RedFox
    Не загружается изображение [Ошибка HTTP]. Как исправить?
    "Некоторые картинки загружаются, но большинство нет."

    Сначала не обратил внимания, но видимо проблема в этом. Все, что больше 100Кб, не загружается. Что странно, поскольку в php у меня следующие значения:
    post_max_size = 100M
    upload_max_filesize = 100M
    max_file_uploads = 20

    Полагаю, где-то еще надо увеличить размер загружаемой картинки, но где?
  • LMakc | Модуль читалка pdf 1
    Фото LMakc
    LMakc
    Модуль читалка pdf
    Не начинай, я заплатил сегодня штраф за підручники. Сейчас очень сложно с этим.
  • ssssss | Сделать подсчет количества символов в ко ... 5
    Фото ssssss
    ssssss
    Сделать подсчет количества символов в комментариях
    Есть актуальный плагин под 17 версию? (только количество символов! без наворотов... записей куда-либо и т.п.) *ББ-редактор
  • alex.sg.spb | Как вывести информацию о обновлении ново ... 8
    Фото alex.sg.spb
    alex.sg.spb
    Как вывести информацию о обновлении новости, но на время?
    вопрос, в продолжение поста. Помогите с кодом вывода инфо UPDATE на краткой новости, так чтобы не нужно было нажимать внутри новости при редактировании галочку?
  • Kentavr | Как вместо %20 в адресной строке подстав ... 9
    Фото Kentavr
    Kentavr
    Как вместо %20 в адресной строке подставлять символ + между словами ???
    Спасибо огромное. Этот вариант самый простой и рабочий!
  • derebas | Как вместо %20 в адресной строке подстав ... 9
    Фото derebas
    derebas
    Как вместо %20 в адресной строке подставлять символ + между словами ???
    К черту htaccess давайте проще

    к href добавьте id="xfield_value"
    <a href="/company/[xfvalue_company]/" id="xfield_value">[xfvalue_company]</a>

    И добавьте скрипт обработчик 
    <script>
document.addEventListener('DOMContentLoaded', function() {
    const links = document.querySelectorAll('a#xfield_value');

    links.forEach(link => {
      let href = link.getAttribute('href');

      if (href) {
        href = href.replace(/ /g, '+');
        link.setAttribute('href', href);
      }
    });
  });
</script>
  • Kentavr | Как вместо %20 в адресной строке подстав ... 9
    Фото Kentavr
    Kentavr
    Как вместо %20 в адресной строке подставлять символ + между словами ???
    Так сайт не работает вообще. Браузер выдает такое

    Страница недоступна Сайт ... выполнил переадресацию слишком много раз.
    Попробуйте удалить файлы cookie.

    ERR_TOO_MANY_REDIRECTS

    Куки чистил не помогает
  • derebas | Как вместо %20 в адресной строке подстав ... 9
    Фото derebas
    derebas
    Как вместо %20 в адресной строке подставлять символ + между словами ???
    Попробуйте так
    RewriteEngine On
    RewriteCond %{REQUEST_URI} %20
    RewriteRule (.*)%20(.*) $1+$2 [N]
    RewriteRule (.*) $1 [R=301,L]
наверх