Динамическое изменение цвета css встроенного текста с помощью JS / jQuery

#javascript #jquery #tinymce

Вопрос:

Я пытаюсь изменить цвет / полужирный цвет ключевых слов по мере ввода пользователем в поле ввода текста TinyMCE. Не уверен, нужно ли вам знать TinyMCE, чтобы ответить на этот вопрос. В любом случае, у меня определено следующее:

 <p class="air-section">
   <span class="air-text-entry air-entry" style="display: block; color: #E2E7E9; margin: 5px;" />
</p>

Когда пользователь вводит «Это опасно», при нажатии пробела после dangerous слово ищется, и если dangerous найдено, ТОЛЬКО dangerous выделяется жирным шрифтом и окрашивается в красный цвет.

Что у меня есть:

 if ($element.hasClass('air-text-entry')) {
   let pos = $element.text().lastIndexOf(" ");
   if (pos > 0)
      pos  = 1;
   
   // ?? What to do here
   // I've played with:
   $element.text().substr(pos).css({'color':'#FFD700', 'font-weight':'bold'})

Как вы можете сказать, я довольно невежественен.
Спасибо

РЕДАКТИРОВАТЬ В настоящее время я пытаюсь выделить ключевое слово как подстроку и перенести его в объект jQuery, а затем изменить css только для этого текста. Не уверен, что это выполнимо.

Ответ №1:

Вот что я получил после некоторой работы. Не полностью протестировал, но я думаю, что это сработает.

 let text = $element.text()
text = $element.text().substr(0, pos)
let appliedText = text   "<span class='red-text'>"   $element.text().substr(pos)   "</span>";
$element.html(text);

Ответ №2:

Я не видел TinyMCE на работе, поэтому я использую блокнот на приемном компьютере. Я, вероятно, что-то не так, но это первый бит: Мне нужно добавить что-то, что получает «Это опасно», и обернуть его в тег span, чтобы иметь возможность добавлять туда класс.

 <!DOCTYPE html>
<html>
    <head>
        <title>Document</title>
        <style>
            .danger {
            color: red;
            font: bold;
            }
        </style>
    </head>
    <body>
        <p class="air-section">
            <span class="air-text-entry air-entry danger" style="display: block; color: #E2E7E9; margin: 5px;">This is dangerous</span>
        </p>
    </body>
    <script>
        const entry = document.querySelector('.air-entry');
        if(entry.textContent.includes('This is dangerous')){
        entry.classList.add('danger');
        }
    </script> 
</html>

Ответ №3:

Если вы знаете слова, которые нужно выделить жирным шрифтом и раскрасить, то вам может помочь следующий код. Я делал это раньше для написания SQL-запросов

Скрипка:

https://jsfiddle.net/qcykvr8j/2/

 <textarea name="query_field_one" id="query_field_one" onkeyup="checkName(this)"></textarea>

 function checkName(el)
  {
    if (el.value == "SELECT" || 
    el.value == "FROM" || 
    el.value == "WHERE" || 
    el.value == "LIKE" || 
    el.value == "BETWEEN" || 
    el.value == "NOT LIKE" || 
    el.value == "FALSE" || 
    el.value == "NULL" || 
    el.value == "TRUE" || 
    el.value == "NOT IN")
    {
      el.style.color='orange'

    }
    else {
      el.style.color='#FFF'

    }
  }

   #query_field_one
  {
    width: 400px;
    height: 150px;
    max-width: 400px;
    max-height: 150px;
    background-color: #444;
    color: white;
    font-size: 14px;
  }

1. Это круто. Но я считаю, что с TinyMCE динамически меняется только текстовое поле. Поэтому, хотя это будет работать, <textarea>BETWEEN</textarea> я не думаю, что это будет работать с <textarea>I found myself BETWEEN</textarea> тем, где просто BETWEEN выделено.

Ответ №4:

Было бы лучше?

 <!DOCTYPE html>
<html>

<head>
    <title>Document</title>
    <style>
        .danger {
            color: red;
            font: bold;
        }
    </style>
</head>

<body>
    <p class="air-section"> blah blah blah This is dangerous blah blah
    </p>
</body>
<script>
    const section = document.querySelector('.air-section');

    let str = section.innerHTML;
    let newstr = str.replace(/This is dangerous/gi, '<span class="air-text-entry air-entry danger" style="display: block;  margin: 5px;">This is dangerous</span>');

    section.innerHTML = newstr;
</script>

</html>