使用 JS/jQuery 动态更改内联文本的 css 颜色

Question

我试图在用户在 TinyMCE 文本输入字段中键入时更改关键字的 color/bold 状态。不确定您是否需要了解 TinyMCE 才能回答这个问题。无论如何，我有以下定义：

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

当用户键入“This is dangerous”时，当 space 条在 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 。不过不确定这是否可行。

Answer 1

如果您知道需要加粗和着色的单词，那么以下代码可能会对您有所帮助。我之前为 SQL 查询编写

做过

Fiddle:

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;
  }

Answer 2

这是我工作后得到的。还没有完全测试过，但我认为这会起作用。

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);

Answer 3

我在工作中没见过 TinyMCE，所以我在接待计算机上使用记事本。我可能出了点问题，但这是第一点：我需要添加一些东西来获取 'This is dangerous' 并将其包装在 span 标签中，应该能够在那里添加 class。

<!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>

Answer 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>

使用 JS/jQuery 动态更改内联文本的 css 颜色

Change css color of inline text dynamically using JS/jQuery

javascript

jquery

tinymce