使用 JS/jQuery 动态更改内联文本的 css 颜色
[英]Change css color of inline text dynamically using JS/jQuery
问题描述
I am attempting to change the color/bold state of keywords as the user types in a TinyMCE text entry field.
当用户在 TinyMCE 文本输入字段中键入时，我正在尝试更改关键字的颜色/粗体 state。 Not sure if you need to know TinyMCE to answer this.不确定您是否需要知道 TinyMCE 来回答这个问题。 Anyway, I have the following defined:无论如何，我定义了以下内容：
<p class="air-section">
<span class="air-text-entry air-entry" style="display: block; color: #E2E7E9; margin: 5px;" />
</p>
As the user types "This is dangerous ", when the space bar is hit after dangerous the word is looked up and if dangerous is found, ONLY dangerous is set to bold and colored red.当用户键入“这很危险”时，当在危险后按下空格键时，会查找单词并且如果发现危险，则将仅危险设置为粗体并涂成红色。
What I have is:我所拥有的是：
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'})
As you can tell I'm pretty clueless.正如你所知道的，我很无知。 Thanks谢谢
EDIT I am currently trying to break the keyword off as a substring and get that to a jQuery object, then change the css of just that text.编辑我目前正在尝试将关键字断开为 substring 并将其转换为 jQuery object，然后更改该文本的 ZC7A628CBA22E28EB16AZAE252F Not sure if that is doable though.不确定这是否可行。
4 个解决方案
解决方案1
1 已采纳 2020-12-07 18:36:14
Here is what I got after some work.这是我工作后得到的。 Haven't fully tested it, but I think this will work.还没有完全测试它，但我认为这会奏效。
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
1 2020-12-07 18:48:25
I've not seen TinyMCE, at work so im using notepad on a reception computer.我没有看到 TinyMCE 在工作，所以我在接收计算机上使用记事本。 I've probs got something wrong but this is the first bit: I need to add something that gets the 'This is dangerous' and wrap it in a span tag, should be able to add the class there.我有问题，但这是第一个问题：我需要添加一些得到“这很危险”的东西并将其包装在一个跨度标签中，应该能够在那里添加 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>
解决方案3
0 2020-12-07 17:59:48
If you know the words that need to bold and colored then the following code may help you.如果您知道需要加粗和着色的单词，那么以下代码可能会对您有所帮助。 I did it before for SQL query writing我之前为 SQL 查询写作做过
Fiddle:小提琴：
https://jsfiddle.net/qcykvr8j/2/ 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;
}
解决方案4
0 2020-12-08 10:55:11
Would this be better?这会更好吗？
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.