Ask coding questions

← Back to all posts
How to apply a style to a certain area in a textarea in HTML, CSS, JS
Dunce (70)

Hello I would like to take the string I get from a textarea, then look for certain words in that string, then apply a style to them. How would I do that?

Answered by ch1ck3n (2088) [earned 5 cycles]
View Answer
Comments
hotnewtop
ch1ck3n (2088)

it's not possible in a textarea but I think this works

<p contenteditable="true">ooga booga <span style="color:red;">ooga</span> booga ooga booga </p>
ch1ck3n (2088)

@ch1ck3n and yes you can edit it

ch1ck3n (2088)

@ch1ck3n

so

<p contenteditable="true" id="text">ooga booga ooga booga ooga booga </p>
<script>
text = document.querySelector("#text").innerHTML
text = text.replaceAll("booga", "<span style=\"color:red;\">booga</span>")
document.querySelector("#text").innerHTML = text
</script>
Coder100 (18222)

oh yeah btw

if you are thinking of making a code editor... don't do this
it'll cause more pain than anything, considering you could use something that replit uses, in half the time
https://microsoft.github.io/monaco-editor/

unless ur making a Microsoft word, you should probably reconsider

Dunce (70)

@Coder100 Thanks! But that's not what I wanted this for.

Coder100 (18222)

yeah, but always have to confirm xd @Dunce

ch1ck3n (2088)

@Dunce using monaco will get you canceled
make your own code editor

Coder100 (18222)

lol what

i think you mean the OTHER way around @ch1ck3n

EdwardBentler (36)

@Dunce
If I understand you correctly, I think I have an answer,
First, you'd have to get the string from the text area, so you would select the text area,

document.querySelector('.textArea')

Then you'd have to select the text inside,

document.querySelector('.textArea').innerHTML

That should give you a string with whatever is inside of the text area, you could save the string to a variable if you want, whatever you want to do you can. Next, there's a special function for finding certain words or phrases in strings: the .indexOf() function,

var myString = 'Hello World'
console.log(myString.indexOf('Hello'))

The output of this would be 0, this is because the indexOf() function gives you the index number of the first letter of the word/phrase and a -1 if that phrase isn't there. Unfortunately, this only works for the first appearance of the word/phrase so if the word/phrase appears more than once I don't know how to help with the finding certain words part. Applying styles to them is simple, but I honestly only found these links today when I had the same issue.

https://www.w3schools.com/jsref/jsref_bold.asp
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_str_style

Dunce (70)

@EdwardBentler Thanks! But I already got the answere I needed.

Bookie0 (6299)

Not quite sure how to do the latter (apply a style), but here's the start:

For this, you can use DOM. First, you can get the value of the textarea with
var str document.getElementById("#id of your textarea").value

Then, you can use .search() to find some words:

var after = str.search("W3Schools")

And to apply style, you can also use DOM. For example, you can get an element and color it red:

document.getElementById("thing").style.color = "red"

Good luck! :D

ch1ck3n (2088)

@Bookie0 textarea doesn't render html

Bookie0 (6299)

@ch1ck3n not quite sure i understand, sry lol..

Dunce (70)

@ch1ck3n @Bookie0 Thanks, sorry I didn't check my notifications.