Change CSS of a certain character in a specific div using JavaScript

Question

Is there a way to change the CSS of a single character on a complete page:

E.g.

I have few divs on my page

<div class="a">
abcd
</div>
<div class="b">
abcd
</div>
<div class="c">
abcd
</div>
<div class="d">
abcd
</div>

And I want to change CSS of character "d" but only in div that belongs to class "c"

Is there a way to do that.

P.S. I want to change the font of that one single character

you can't directly to it, but if you wrap the d in a <span>, you can put the styles on the span. so, yes you can, but you'll have to do some DOM modifications. — Marc B
– Marc B, Commented May 2, 2014 at 18:40
@AlexW Yes there is just text inside the div's that I want this feature for — Nick Div
– Nick Div, Commented May 2, 2014 at 18:42
possible duplicate of How to apply a style to a single special HTML character across the page — abl
– abl, Commented May 2, 2014 at 18:43

Alex W · Accepted Answer · 2014-05-02 18:52:16Z

2

This works for me on Chrome:

var Cs = document.getElementsByClassName('c');

for(var i = 0; i < Cs.length; i++)
{
    var text = Cs[i].textContent;
    Cs[i].innerHTML = text.replace('d','<span class="red">d</span>');
}

http://jsfiddle.net/u5ZC8/

answered May 2, 2014 at 18:52

Alex W

38.5k13 gold badges114 silver badges115 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alex W Over a year ago

@kapilchhattani If you want to support IE8 or below, just change textContent to innerHTML. And note that this will work if the div contains text and only text.

Nick Div Over a year ago

I might add something else soon to the div, like few more tags inside it, what will happen after that..

Slevin · Accepted Answer · 2014-05-02 18:59:38Z

My approach (You can shorten/optimize code. This code is very detailed for explanation):

// config
var string = 'd';
var selector = '.c';
var font_size = 28;

// create regex from string
var regex = new RegExp(string,"g");

// wrap span around string and set font-size
var replace = '<span style="font-size: ' + font_size + 'px;">' + string + '</span>';

// find elements with given selector
var el = document.querySelectorAll(selector);
for (var i = 0; i < el.length; i++) {

    // get HTML from element and ...
    var text = el[i].innerHTML;

    // ... replace it with given span element
    var new_text = text.replace(regex, replace);

    // set new HTML
    el[i].innerHTML = new_text;
};

Working fiddle: http://jsfiddle.net/gopeter/tN3Bx/8/

Edit

Sorry, you asked for font-family. New fiddle: http://jsfiddle.net/gopeter/tN3Bx/9/

qiuyuntao · Accepted Answer · 2014-05-02 19:01:15Z

0

First you need to find tag which className is c.

var class = document.getElementsByClassName('c');

Then class is [], so we need to use for circulate to find everyone.

for (var i = 0, l = Cs.length; i < l; i++) {
    class[i].innerHTML = class[i].innerHTML.replace('d','<span style="color:red">d</span>');
}

answered May 2, 2014 at 19:01

qiuyuntao

2,4045 gold badges23 silver badges25 bronze badges

Comments

Jan Kyu Peblik · Accepted Answer · 2017-01-21 05:53:05Z

0

A font can contain a single character customized however you please (FontForge is your friend):

@font-face { font-family: a; src: url(a); }
@font-face { font-family: b; src: url(b); }
@font-face { font-family: c; src: url(c); }
@font-face { font-family: d; src: url(d); }
.a { font-family: a; }
.b { font-family: b; }
.c { font-family: c; }
.d { font-family: d; }

answered Jan 21, 2017 at 5:53

Jan Kyu Peblik

1,55515 silver badges22 bronze badges

Collectives™ on Stack Overflow

Change CSS of a certain character in a specific div using JavaScript

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related