Change css color of inline text dynamically using JS/jQuery
Question
I am attempting to change the color/bold state of keywords as the user types in a TinyMCE text entry field. Not sure if you need to know TinyMCE to answer this. 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. Not sure if that is doable though.
4 answers
solution1
1 ACCPTED 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);
solution2
1 2020-12-07 18:48:25
I've not seen TinyMCE, at work so im using notepad on a reception computer. 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.
<!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>
solution3
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
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;
}
solution4
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.