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

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

javascript jquery tinymce

Javascript 使用JS/jQuery动态更改内联文本的css颜色,javascript,jquery,tinymce,Javascript,Jquery,Tinymce,当用户在TinyMCE文本输入字段中键入时，我试图更改关键字的颜色/粗体状态。不确定您是否需要了解TinyMCE才能回答此问题。无论如何，我有以下定义： <p class="air-section"> <span class="air-text-entry air-entry" style="display: block; color: #E2E7E9; margin: 5px;" /> </p&g

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

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

你可以看出我很无知。谢谢

编辑

我目前正在尝试将关键字作为子字符串断开，并将其发送到jQuery对象，然后仅更改该文本的css。但不确定这是否可行。

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

小提琴：

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

let text=$element.text（）
text=$element.text（）.substr（0，位置）
让appliedText=text++$element.text（）.substr（pos）+；
$element.html（文本）；

我没有看到TinyMCE在工作，所以我在接收电脑上使用记事本。我有点不对劲，但这是第一点：我需要添加一些获得“This is Danger”的内容，并将其包装在一个span标记中，应该能够在那里添加类


文件
.危险{
颜色：红色；
字体：粗体；
}

这很危险

const entry=document.querySelector（“.air entry”）；
if（entry.textContent.includes（'这很危险'））{
entry.classList.add（'danger'）；
}

这样会更好吗

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


文件
.危险{
颜色：红色；
字体：粗体；
}
这是危险的废话

const section=document.querySelector（“.air section”）；
让str=section.innerHTML；
让newstr=str.replace（/这是危险的/gi，‘这是危险的’）；
section.innerHTML=newstr；

太酷了。但我相信TinyMCE只是动态变化的文本区域。因此，尽管这对

之间的有效，但我认为这对不起作用，我发现自己在之间，突出显示了之间的，这很有趣。我现在也在做同样的事情。虽然这是一个丑陋的解决方案，但它满足了我的需要。我喜欢这种课堂教学方法。我得试一试。
<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;
  }

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