Nano Hash - криптовалюты, майнинг, программирование

Как изменить цвет текста на основе текстового значения внутри абзаца

У меня есть абзац или h1 с «цвет этого элемента пурпурный» или «этот вывод красный». Цветной текст (красный, черный, голубой, пурпурный или желтый) может находиться где-то в абзаце или теге h1.

Мой код до сих пор.

HTML

<div id="foo">
  red magenta yellow black blue
</div>
<h1>magenta toner cartridge</h1>

CSS

.red{
  color: red;   
}
.magenta{
  color: magenta;   
}

JAVASCRIPT

$("div:contains('magenta')").each(function () {
  $(this)
    .html($(this)
    .html()
    .replace("magenta", "<span class='magenta'>magenta</span>"));
});

$("div:contains('red')").each(function () {
  $(this)
    .html($(this)
    .html()
    .replace("red", "<span class='red'>red</span>"));
});


$("h1:contains('magenta')").each(function () {
  $(this)
    .html($(this)
    .html()
    .replace("magenta", "<span class='magenta'>MAGENTA</span>"));
});

Вопрос Как я могу динамически изменить фон и цвет текста слова пурпурный и красный в зависимости от текста внутри элемента?

javascript php jquery css dynamic-programming
10.09.2016

  • Вы должны опубликовать код. 10.09.2016
  • Если вы что-то пробовали, отпишитесь и об этом 11.09.2016
  • jsfiddle.net/5bSgc/72 11.09.2016

Ответы:


1

Что-то вроде этого будет работать:

 




var colors={'red':{'background-color':'#ff0000',"color":'#ffffff'},
            'black':{'background-color':'#000000',"color":'#ffffff'},
            'cyan':{'background-color':'#00ffff',"color":'#ffffff'},
            'magenta':{'background-color':'#ff00ff',"color":'#ffffff'},
            'yellow':{'background-color':'#ffff00',"color":'#000000'}
            };
            


function colorize(colorsArr, selector) {
  $.each(colorsArr, function(color, obj) {
    var regex = new RegExp('(' + color + ')', 'gi');
    var style = ' style="' + JSON.stringify(obj).replace(/[{"}]/g, '').replace(',', ';') + '" '
    var $element = $(selector);
    var curComtent = $element.html();
    if (curComtent.match(regex)) {
      var newContent = curComtent.replace(regex, '<span ' + style + '>$1</span>');
    }
    $element.html(newContent); 
  });
}


colorize(colors, '.test');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="test">
  I have a paragraph or h1 with "the color of this item is Magenta" or "this output is Red". So how can I change the background and text color of the word Magenta and Red dynamically. The text with color (red, black, cyan, magenta or yellow) could be somewhere
  on the paragraph or h1 tag.
</p>

10.09.2016
  • Downvoter должен объяснить. Это соответствует требованиям. 11.09.2016
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..