Как красить заданные слова без запятых и точек?

Question

const colors = ['red', 'blue', 'green', 'yellow'];

let str = document.querySelectorAll('p');
let arrStr = Array.from(str);

function findWords(lorem) {
  lorem = lorem.forEach((element, index) => {
    element = element.innerText.split(' ');
    for (let j = 0; j < colors.length; j++) {
      for (let i = 0; i < element.length; i++) {
        // if (element[i].includes(',') || element[i].includes('.')) {
        //     // console.log(element.splice(i, 1, colors[j], element[i].slice(-1)))
        //     // element.splice(i, 1)        
        //     // element[i].innerText.split(','); 
        // //   element[i].innerText.join('') 
        // }   
        // console.log(element[i])
        if (element[i].replace(',', '').replace('.', '') === colors[j]) {
          console.log(`Найдено:  ${element[i]}`)
          element[i] = `<span style="color: ${colors[j]}">${element[i]}</span>`;
        }

      }
    }
    lorem[index].innerHTML = element.join(' ')
    console.log(element)
  });
}
console.log(findWords(arrStr))

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet lacinia libero. Aliquam vehicula sapien eget nunc tempus, id faucibus lorem red pellentesque. Etiam sodales elit ante, sed rhoncus tortor faucibus vel. Vestibulum nec arcu neque.
    Maecenas dui sem, efficitur quis elit non, lacinia blue placerat risus. Sed mattis est purus. Pellentesque blandit eros ligula, yellow ac fermentum green magna interdum red maximus. Phasellus erat urna, dictum eu porta quis, ornare quis ligula.</p>
  <p>Maecenas consequat, leo in tempus blandit, massa ligula faucibus dolor, at feugiat odio elit sed elit. Quisque molestie nulla in orci facilisis, et auctor mauris elementum. Sed mi neque, efficitur ut aliquet a, luctus lobortis lectus. Nunc pretium cursus
    nisi, at aliquet erat viverra sed. Phasellus red erat ligula, maximus quis tincidunt eget, porttitor at dui. Mauris ut urna pharetra, mollis lacus at, posuere nisl. Aliquam a dapibus mi. Pellentesque vestibulum porta erat at maximus. Duis posuere
    tincidunt purus, vitae volutpat lectus varius vitae. Nam rutrum blue venenatis augue vel commodo. Suspendisse nec nulla eros.</p>
  <p>Duis lorem est bluetoth, blandit eget leo pharetra, rutrum semper ante. Suspendisse vestibulum in risus id hendrerit. Nulla volutpat velit ac tortor lacinia euismod. In non purus dictum, pellentesque mauris ac, viverra est. Phasellus urna odio, sodales
    et nisl sed, condimentum volutpat ex. Duis et vulputate urna. Praesent sollicitudin lacinia felis, nec facilisis purus venenatis in. Integer yellow et lacus green dapibus eros vestibulum vestibulum.</p>
  <p>Pellentesque ultricies, nunc yellow dictum yellow luctus blue posuere, orci ex dapibus tortor, vel ultrices nulla velit quis neque. Mauris nisl ligula, lobortis id metus quis, gravida eleifend diam. Curabitur sapien nibh, faucibus sed diam et, luctus
    imperdiet risus. Cras urna nunc, luctus sit amet red libero ac, tristique egestas nibh. Cras dui elit, malesuada sit amet quam eget, efficitur maximus magna. Nulla auctor dignissim dictum. Curabitur condimentum semper lacus, tristique bibendum justo
    lobortis et. Interdum green et malesuada fames ac ante ipsum primis in faucibus. Phasellus finibus diam at auctor condimentum. Morbi at nisi nec purus red maximus pulvinar. Duis at lorem ultricies, blandit velit sed, condimentum justo. Suspendisse
    potenti.</p>
  <p>Redux, Morbi accumsan tortor eros, vel consectetur lectus iaculis red vitae. Integer rhoncus imperdiet purus, in mattis justo tempor at. Sed tristique porta ligula, eu gravida erat red congue ac. Donec leo justo, fermentum nec nisi auctor, vulputate
    fringilla ex. Morbi ut tempor tortor, quis tincidunt velit. Integer in commodo lorem. Sed vestibulum vestibulum mi at semper. Suspendisse nisi tellus, vestibulum porttitor purus nec, pharetra semper erat. Sed lorem blue turpis, euismod sit amet hendrerit
    non, red, yellow. consequat ac tellus. Fusce nec iaculis elit. Cras non molestie est. Aenean faucibus neque metus, nec tempus est consequat et. Quisque accumsan, turpis vel vulputate dignissim, dui erat scelerisque enim, sit amet auctor nisl green
    arcu non odio. Quisque eleifend id dolor a egestas.</p>
  <style>
    body {
      background-color: #000;
      color: #fff;
    }
  </style>
  <script src="script.js"></script>
</body>

</html>

Answer 1

Предложу вот такой вариант раскраски...

const colors = ['red', 'blue', 'green', 'yellow']
let re = '(?<=[^\\w])(' + colors.join('|') + ')(?=[^\\w])'
re = new RegExp(re, 'gi')
document.querySelectorAll('p').forEach(o => {
  o.innerHTML = o.innerHTML.replace(re, '<span style="color: $&;">$&</span>')
})

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet lacinia libero. Aliquam vehicula sapien eget nunc tempus, id faucibus lorem red pellentesque. Etiam sodales elit ante, sed rhoncus tortor faucibus vel. Vestibulum nec arcu neque.
    Maecenas dui sem, efficitur quis elit non, lacinia blue placerat risus. Sed mattis est purus. Pellentesque blandit eros ligula, yellow ac fermentum green magna interdum red maximus. Phasellus erat urna, dictum eu porta quis, ornare quis ligula.</p>
  <p>Maecenas consequat, leo in tempus blandit, massa ligula faucibus dolor, at feugiat odio elit sed elit. Quisque molestie nulla in orci facilisis, et auctor mauris elementum. Sed mi neque, efficitur ut aliquet a, luctus lobortis lectus. Nunc pretium cursus
    nisi, at aliquet erat viverra sed. Phasellus red erat ligula, maximus quis tincidunt eget, porttitor at dui. Mauris ut urna pharetra, mollis lacus at, posuere nisl. Aliquam a dapibus mi. Pellentesque vestibulum porta erat at maximus. Duis posuere
    tincidunt purus, vitae volutpat lectus varius vitae. Nam rutrum blue venenatis augue vel commodo. Suspendisse nec nulla eros.</p>
  <p>Duis lorem est bluetoth, blandit eget leo pharetra, rutrum semper ante. Suspendisse vestibulum in risus id hendrerit. Nulla volutpat velit ac tortor lacinia euismod. In non purus dictum, pellentesque mauris ac, viverra est. Phasellus urna odio, sodales
    et nisl sed, condimentum volutpat ex. Duis et vulputate urna. Praesent sollicitudin lacinia felis, nec facilisis purus venenatis in. Integer yellow et lacus green dapibus eros vestibulum vestibulum.</p>
  <p>Pellentesque ultricies, nunc yellow dictum yellow luctus blue posuere, orci ex dapibus tortor, vel ultrices nulla velit quis neque. Mauris nisl ligula, lobortis id metus quis, gravida eleifend diam. Curabitur sapien nibh, faucibus sed diam et, luctus
    imperdiet risus. Cras urna nunc, luctus sit amet red libero ac, tristique egestas nibh. Cras dui elit, malesuada sit amet quam eget, efficitur maximus magna. Nulla auctor dignissim dictum. Curabitur condimentum semper lacus, tristique bibendum justo
    lobortis et. Interdum green et malesuada fames ac ante ipsum primis in faucibus. Phasellus finibus diam at auctor condimentum. Morbi at nisi nec purus red maximus pulvinar. Duis at lorem ultricies, blandit velit sed, condimentum justo. Suspendisse
    potenti.</p>
  <p>Redux, Morbi accumsan tortor eros, vel consectetur lectus iaculis red vitae. Integer rhoncus imperdiet purus, in mattis justo tempor at. Sed tristique porta ligula, eu gravida erat red congue ac. Donec leo justo, fermentum nec nisi auctor, vulputate
    fringilla ex. Morbi ut tempor tortor, quis tincidunt velit. Integer in commodo lorem. Sed vestibulum vestibulum mi at semper. Suspendisse nisi tellus, vestibulum porttitor purus nec, pharetra semper erat. Sed lorem blue turpis, euismod sit amet hendrerit
    non, red, yellow. consequat ac tellus. Fusce nec iaculis elit. Cras non molestie est. Aenean faucibus neque metus, nec tempus est consequat et. Quisque accumsan, turpis vel vulputate dignissim, dui erat scelerisque enim, sit amet auctor nisl green
    arcu non odio. Quisque eleifend id dolor a egestas.</p>

Answer 2

Вариант без регулярок. Алгоритм:

Создаём массив цветов
Массив допустимых символов, которые могут быть после цвета

2.1 Создаём набор (new Set) допустимых символов. Наборы позволяют не тратить время на поиск, но занимают место в памяти
Создаём набор всевозможных комбинаций цветов и допустимых символов
Находим все параграфы
В каждом параграфе разбиваем содержимое по пробелам и получаем массив
Создаём новый массив, куда записываем видоизменённые элементы разбиения
Сначала проверяем есть ли в наборе всевозможных комбинаций цветов и допустимых символов очередное слово из разбиенния
Если нет, то просто не трогаем это слово. Если есть, разделяем слово на 2 переменные
В одной переменной слово без последнего символа, в другой последний символ
Смотрим, если последний символ это один из допустимых символов, значит цвет - это слово без последнего символа, если это не так, значит само слово и есть цвет
Заменяем слово на то что нам нужно и дальше объединяя все слова по пробелам встаялем в параграф обратно

const colors = ['red', 'blue', 'green', 'yellow'];
const availableSymbols = ['.', ',', '!', '?'];
const availableSymbolsSet = new Set(availableSymbols);

const colorsWithSymbols = new Set(colors);

colors.forEach(color => {
  availableSymbols.forEach(availableSymbol => {
    colorsWithSymbols.add(color + availableSymbol);
  })
});

const colorizeWord = (color, lastSymbol = '') => `<span style="color: ${color}">${color}</span>${lastSymbol}`;

const paragraphs = document.querySelectorAll('p');

paragraphs.forEach(paragraph => {
  const words = paragraph.innerHTML.split(' ');
  
  const formattedWords = words.map(word => {
    if (!colorsWithSymbols.has(word)) return word;
    
    const lastSymbol = word[word.length - 1];
    const wordWithoutLastSymbol = word.slice(0, -1);
    
    return availableSymbolsSet.has(lastSymbol) ? colorizeWord(wordWithoutLastSymbol, lastSymbol) : colorizeWord(word);

  });
  
  paragraph.innerHTML = formattedWords.join(' ');
});

body {
  background-color: #000;
  color: #fff;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet lacinia libero. Aliquam vehicula sapien eget nunc tempus, id faucibus lorem red pellentesque. Etiam sodales elit ante, sed rhoncus tortor faucibus vel. Vestibulum nec arcu neque. Maecenas
  dui sem, efficitur quis elit non, lacinia blue placerat risus. Sed mattis est purus. Pellentesque blandit eros ligula, yellow ac fermentum green magna interdum red maximus. Phasellus erat urna, dictum eu porta quis, ornare quis ligula.</p>
<p>Maecenas consequat, leo in tempus blandit, massa ligula faucibus dolor, at feugiat odio elit sed elit. Quisque molestie nulla in orci facilisis, et auctor mauris elementum. Sed mi neque, efficitur ut aliquet a, luctus lobortis lectus. Nunc pretium cursus
  nisi, at aliquet erat viverra sed. Phasellus red erat ligula, maximus quis tincidunt eget, porttitor at dui. Mauris ut urna pharetra, mollis lacus at, posuere nisl. Aliquam a dapibus mi. Pellentesque vestibulum porta erat at maximus. Duis posuere tincidunt
  purus, vitae volutpat lectus varius vitae. Nam rutrum blue venenatis augue vel commodo. Suspendisse nec nulla eros.</p>
<p>Duis lorem est bluetoth, blandit eget leo pharetra, rutrum semper ante. Suspendisse vestibulum in risus id hendrerit. Nulla volutpat velit ac tortor lacinia euismod. In non purus dictum, pellentesque mauris ac, viverra est. Phasellus urna odio, sodales
  et nisl sed, condimentum volutpat ex. Duis et vulputate urna. Praesent sollicitudin lacinia felis, nec facilisis purus venenatis in. Integer yellow et lacus green dapibus eros vestibulum vestibulum.</p>
<p>Pellentesque ultricies, nunc yellow dictum yellow luctus blue posuere, orci ex dapibus tortor, vel ultrices nulla velit quis neque. Mauris nisl ligula, lobortis id metus quis, gravida eleifend diam. Curabitur sapien nibh, faucibus sed diam et, luctus
  imperdiet risus. Cras urna nunc, luctus sit amet red libero ac, tristique egestas nibh. Cras dui elit, malesuada sit amet quam eget, efficitur maximus magna. Nulla auctor dignissim dictum. Curabitur condimentum semper lacus, tristique bibendum justo
  lobortis et. Interdum green et malesuada fames ac ante ipsum primis in faucibus. Phasellus finibus diam at auctor condimentum. Morbi at nisi nec purus red maximus pulvinar. Duis at lorem ultricies, blandit velit sed, condimentum justo. Suspendisse potenti.
</p>
<p>Redux, Morbi accumsan tortor eros, vel consectetur lectus iaculis red vitae. Integer rhoncus imperdiet purus, in mattis justo tempor at. Sed tristique porta ligula, eu gravida erat red congue ac. Donec leo justo, fermentum nec nisi auctor, vulputate fringilla
  ex. Morbi ut tempor tortor, quis tincidunt velit. Integer in commodo lorem. Sed vestibulum vestibulum mi at semper. Suspendisse nisi tellus, vestibulum porttitor purus nec, pharetra semper erat. Sed lorem blue turpis, euismod sit amet hendrerit non,
  red, yellow. consequat ac tellus. Fusce nec iaculis elit. Cras non molestie est. Aenean faucibus neque metus, nec tempus est consequat et. Quisque accumsan, turpis vel vulputate dignissim, dui erat scelerisque enim, sit amet auctor nisl green arcu non
  odio. Quisque eleifend id dolor a egestas.</p>

Вариант с регулярками. Алгоритм:

Создаём регулярку с помощью RegExp

1.1 Добавил по краям \b чтобы захватывать только данные слова польностью. Т.е. чтобы они не были частью других слов. Чтобы добавить \b надо писать \\b для экранизации \. Если вам надо подкрашивать данные слова так же внутри других слов, то вам надо убрать \\b( и )\\b

1.2 Не добавил флаг i, т.к. не знал нужно ли вам учитывать регистр или нет

1.3 Флаг g нужен как для глобального поиска так и обязателен для использования replaceAll
Проходимся по всем тегам p и меняем их содержимое с помощью replaceAll

const colors = ['red', 'blue', 'green', 'yellow'];
const regexp = new RegExp(`\\b(${colors.join('|')})\\b`, 'g');

console.log(regexp);

const paragraphs = document.querySelectorAll('p');

paragraphs.forEach(paragraph => paragraph.innerHTML = paragraph.innerHTML.replaceAll(regexp, '<span style="color: $&;">$&</span>'));

body {
  background-color: #000;
  color: #fff;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet lacinia libero. Aliquam vehicula sapien eget nunc tempus, id faucibus lorem red pellentesque. Etiam sodales elit ante, sed rhoncus tortor faucibus vel. Vestibulum nec arcu neque. Maecenas
  dui sem, efficitur quis elit non, lacinia blue placerat risus. Sed mattis est purus. Pellentesque blandit eros ligula, yellow ac fermentum green magna interdum red maximus. Phasellus erat urna, dictum eu porta quis, ornare quis ligula.</p>
<p>Maecenas consequat, leo in tempus blandit, massa ligula faucibus dolor, at feugiat odio elit sed elit. Quisque molestie nulla in orci facilisis, et auctor mauris elementum. Sed mi neque, efficitur ut aliquet a, luctus lobortis lectus. Nunc pretium cursus
  nisi, at aliquet erat viverra sed. Phasellus red erat ligula, maximus quis tincidunt eget, porttitor at dui. Mauris ut urna pharetra, mollis lacus at, posuere nisl. Aliquam a dapibus mi. Pellentesque vestibulum porta erat at maximus. Duis posuere tincidunt
  purus, vitae volutpat lectus varius vitae. Nam rutrum blue venenatis augue vel commodo. Suspendisse nec nulla eros.</p>
<p>Duis lorem est bluetoth, blandit eget leo pharetra, rutrum semper ante. Suspendisse vestibulum in risus id hendrerit. Nulla volutpat velit ac tortor lacinia euismod. In non purus dictum, pellentesque mauris ac, viverra est. Phasellus urna odio, sodales
  et nisl sed, condimentum volutpat ex. Duis et vulputate urna. Praesent sollicitudin lacinia felis, nec facilisis purus venenatis in. Integer yellow et lacus green dapibus eros vestibulum vestibulum.</p>
<p>Pellentesque ultricies, nunc yellow dictum yellow luctus blue posuere, orci ex dapibus tortor, vel ultrices nulla velit quis neque. Mauris nisl ligula, lobortis id metus quis, gravida eleifend diam. Curabitur sapien nibh, faucibus sed diam et, luctus
  imperdiet risus. Cras urna nunc, luctus sit amet red libero ac, tristique egestas nibh. Cras dui elit, malesuada sit amet quam eget, efficitur maximus magna. Nulla auctor dignissim dictum. Curabitur condimentum semper lacus, tristique bibendum justo
  lobortis et. Interdum green et malesuada fames ac ante ipsum primis in faucibus. Phasellus finibus diam at auctor condimentum. Morbi at nisi nec purus red maximus pulvinar. Duis at lorem ultricies, blandit velit sed, condimentum justo. Suspendisse potenti.
</p>
<p>Redux, Morbi accumsan tortor eros, vel consectetur lectus iaculis red vitae. Integer rhoncus imperdiet purus, in mattis justo tempor at. Sed tristique porta ligula, eu gravida erat red congue ac. Donec leo justo, fermentum nec nisi auctor, vulputate fringilla
  ex. Morbi ut tempor tortor, quis tincidunt velit. Integer in commodo lorem. Sed vestibulum vestibulum mi at semper. Suspendisse nisi tellus, vestibulum porttitor purus nec, pharetra semper erat. Sed lorem blue turpis, euismod sit amet hendrerit non,
  red, yellow. consequat ac tellus. Fusce nec iaculis elit. Cras non molestie est. Aenean faucibus neque metus, nec tempus est consequat et. Quisque accumsan, turpis vel vulputate dignissim, dui erat scelerisque enim, sit amet auctor nisl green arcu non
  odio. Quisque eleifend id dolor a egestas.</p>

Answer 3

Вот решение :)

let colors = ['red', 'green', 'blue', 'yellow']

class ChangeColor {
  constructor(els) {
    if(els) {
      if(els instanceof NodeList) {
        this.els = Array.from(els)
      } else if(els instanceof HTMLElement) {
        this.els = [els]
      } else {
        this.els = []
      }
    } else {
      this.els = []
    }
  }

  addElement(el) {
    if(el instanceof HTMLElement) {
      this.els.push(el)
      return true
    }

    return false
  }

  init(colors) {
    let els = this.els

    for (let i = 0; i < els.length; i++) {
      let el = els[i]

      for (let j = 0; j < colors.length; j++) {
        let color = colors[j]
        let resultHTML = el.innerHTML.replaceAll(color, `<span style="color: ${color};">${color}</span>`)

        el.innerHTML = resultHTML
      }
    }
  }
}

let parags = document.querySelectorAll('p')

new ChangeColor(parags)
  .init(colors)

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet lacinia libero. Aliquam vehicula sapien eget nunc tempus, id faucibus lorem red pellentesque. Etiam sodales elit ante, sed rhoncus tortor faucibus vel. Vestibulum nec arcu neque.
    Maecenas dui sem, efficitur quis elit non, lacinia blue placerat risus. Sed mattis est purus. Pellentesque blandit eros ligula, yellow ac fermentum green magna interdum red maximus. Phasellus erat urna, dictum eu porta quis, ornare quis ligula.</p>
  <p>Maecenas consequat, leo in tempus blandit, massa ligula faucibus dolor, at feugiat odio elit sed elit. Quisque molestie nulla in orci facilisis, et auctor mauris elementum. Sed mi neque, efficitur ut aliquet a, luctus lobortis lectus. Nunc pretium cursus
    nisi, at aliquet erat viverra sed. Phasellus red erat ligula, maximus quis tincidunt eget, porttitor at dui. Mauris ut urna pharetra, mollis lacus at, posuere nisl. Aliquam a dapibus mi. Pellentesque vestibulum porta erat at maximus. Duis posuere
    tincidunt purus, vitae volutpat lectus varius vitae. Nam rutrum blue venenatis augue vel commodo. Suspendisse nec nulla eros.</p>
  <p>Duis lorem est bluetoth, blandit eget leo pharetra, rutrum semper ante. Suspendisse vestibulum in risus id hendrerit. Nulla volutpat velit ac tortor lacinia euismod. In non purus dictum, pellentesque mauris ac, viverra est. Phasellus urna odio, sodales
    et nisl sed, condimentum volutpat ex. Duis et vulputate urna. Praesent sollicitudin lacinia felis, nec facilisis purus venenatis in. Integer yellow et lacus green dapibus eros vestibulum vestibulum.</p>
  <p>Pellentesque ultricies, nunc yellow dictum yellow luctus blue posuere, orci ex dapibus tortor, vel ultrices nulla velit quis neque. Mauris nisl ligula, lobortis id metus quis, gravida eleifend diam. Curabitur sapien nibh, faucibus sed diam et, luctus
    imperdiet risus. Cras urna nunc, luctus sit amet red libero ac, tristique egestas nibh. Cras dui elit, malesuada sit amet quam eget, efficitur maximus magna. Nulla auctor dignissim dictum. Curabitur condimentum semper lacus, tristique bibendum justo
    lobortis et. Interdum green et malesuada fames ac ante ipsum primis in faucibus. Phasellus finibus diam at auctor condimentum. Morbi at nisi nec purus red maximus pulvinar. Duis at lorem ultricies, blandit velit sed, condimentum justo. Suspendisse
    potenti.</p>
  <p>Redux, Morbi accumsan tortor eros, vel consectetur lectus iaculis red vitae. Integer rhoncus imperdiet purus, in mattis justo tempor at. Sed tristique porta ligula, eu gravida erat red congue ac. Donec leo justo, fermentum nec nisi auctor, vulputate
    fringilla ex. Morbi ut tempor tortor, quis tincidunt velit. Integer in commodo lorem. Sed vestibulum vestibulum mi at semper. Suspendisse nisi tellus, vestibulum porttitor purus nec, pharetra semper erat. Sed lorem blue turpis, euismod sit amet hendrerit
    non, red, yellow. consequat ac tellus. Fusce nec iaculis elit. Cras non molestie est. Aenean faucibus neque metus, nec tempus est consequat et. Quisque accumsan, turpis vel vulputate dignissim, dui erat scelerisque enim, sit amet auctor nisl green
    arcu non odio. Quisque eleifend id dolor a egestas.</p>

Создал класс ChangeColors, у него есть два метода, addElement, в его первый аргумент записывается элемент, который позже будет использоваться при изменении HTML'а. Также есть метод init, в его первый аргумент передаются цвета, с которыми вы будете работать (Пример: ['purple', 'pink', 'gray'] и другие подобные массивы с разным кол-вом элементов), сам метод берёт список els в котором занесены элементы. Вот примера кода где есть работа с ним:

new ChangeColor(document.querySelector('p')) // Или querySelectorAll, для класса нет разницы.
  .init(['red', 'purple', 'grey', 'brown'])

БЛОГ НА HUSL

Как красить заданные слова без запятых и точек?

Ответы (3 шт):