How to Color Specific Letters in HTML Element Text

How can I color specific letters in html element text?

You can surely do it with javascript:

var span = document.getElementById('phrase'),    text = span.innerHTML.split('').map(function(el) {        return '<span class="char-' + el.toLowerCase() + '">' + el + '</span>';    }).join('');  span.innerHTML = text;

.char-e {    color: red;}

<span id="phrase">Here are some words</span>

change color css only first 6 character of text

How about using :before?

I would change the text from "Client Testimonial" to "Testimonial", and then with CSS apply the :before rule:

HTML:

<div class="word">Testimonial</div>​​​​​​​​

CSS:

.word {
 color: black;       
}
.word:before {
 color: red;
 content: "Client ";
}

Example: http://jsfiddle.net/LvZt7/

How to color specific word in a container using CSS

Not to prove a point, but to answer your question - this is possible in CSS without JS: Example

In short: we set a black background color for text color and a red background image for the specific red string. We remove the original text fill using -webkit-text-fill-color. The background is clipped to the text outline using -webkit-background-clip: text; and the red image is sized and positioned over whatever text string we want to color.

Please note:
I would never recommend using this for any live website. This works in webkit only as it's based on non-standard wekbit-specific CSS rules. And the color is not really bound to the colored text string - it's completely static.

Edit:
Here's the CSS:

#container {
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-size: 1.5em 1em;
    background-repeat: no-repeat;
    background-position: 3.4em 0;
    background-color: #000;
    background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAABAAEDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD5rooor8DP9oD/2Q==);
}

How to find specific letter on a string and change the color of it using

There's a few parts to what you're trying to accomplish. You've already gotten your string:

const myString = someDOMFunction(); // 'This is my string'

Next you need to find the position or "index" of the first 's' in that string:

const sIndex = myString.indexOf('s'); // 3

you can then use that index to split the string into two parts:

const leftPart = myString.substr(0, sIndex); // 'Thi'
const rightPart = myString.substr(sIndex + 1); // ' is my string'

Finally you can build a string of HTML (and CSS) which includes those two parts, using template string syntax:

const html = `${leftPart}<span style="color:red">s</span>${rightPart}`;

... and then add that HTML back onto the page, for instance:

$('#someElement').innerHTML = html;

How can i change the specific character color in the textarea using jquery?

Here is a solution. but jQuery code runs only once

var alpha = ["s","x","e","T"];var res = "", cls = "";var t = $("#txt").text();
for (i=0; i<t.length; i++) {    for (j=0; j<alpha.length; j++) {        if (t[i] == alpha[j]) {cls = "red";}    }    res += "<span class='"+cls+"'>"+t[i]+"</span>";    cls="";}$("#result").html(res);

.red {    color: red;}#result {    font-size: 24px;    font-weight: bold;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><textarea id="txt">This is a line of text for test.</textarea><div id="result"></div>

---

Related Topics