How to get first character of string by Jquery or javaScript?

Question

I have a span with inner span and I'm trying to get the first character of the inner span (t) and change its color. I tried to do that with many way with both JavaScript and jQuery and it doesn't work

// with javascript    

var index = document.getElementById('spa');
var indexsl = index.slice(0, 1);
indexsl.style.color = "f00"; //doesn't work

var index = document.getElementById('spa');
var indexsl = index.substring(0, 1);
indexsl.style.color = "f00"; //doesn't work

var index = document.getElementById('spa');
var indexsl = index.charAt(0, 1);
indexsl.style.color = "f00"; //doesn't work


// with jQuery

var index = $('.design span').charAt(0);
index.css('color', '#f00') // doesn't work

var index = $('.design span').substring(0, 1);
index.css('color', '#f00') // doesn't work

var index = $('.design span').slice(0, 1);
index.css('color', '#f00') // doesn't work

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="design">DESIGNED BY <span id="spa">Teodor Victor</span></span>

Em index is an object, not an array. And you cannot assign a style to it — Jonas Wilms
– Jonas Wilms, Commented Sep 28, 2016 at 21:00
Javascript strings don't have styles. HTML has styles. You can't just cut a character from a string and give it a style. You would need to add tags to your dom that wrap your character (span would be the obvious choice) and assign a style to that tag — Matt Burland
– Matt Burland, Commented Sep 28, 2016 at 21:02

j08691 · Accepted Answer · 2016-09-28 21:04:38Z

2

Or you can skip the JavaScript and use CSS

span.design > span::first-letter {
  color:red;
}

span {
  display:inline-block;
}

<span class="design">DESIGNED BY <span>Teodor Victor</span></span>

answered Sep 28, 2016 at 21:04

j08691

209k33 gold badges269 silver badges281 bronze badges

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

2 Comments

Teodor Over a year ago

why span is inline-block

Teodor Over a year ago

but i gave it flat right and it will not work perfectly is there another way

Pierre · Accepted Answer · 2016-09-28 21:08:51Z

2

What you want is charAt.

var str = 'some string';
console.log(str.charAt(0)); // return 's'

answered Sep 28, 2016 at 21:08

Pierre

1,2872 gold badges16 silver badges31 bronze badges

Comments

Jonas Wilms · Accepted Answer · 2016-09-28 21:03:24Z

0

You need to replace the html:

ind=index.innerHTML.split("");
ret="<span class='red'>"+ind.first()+"</span>"+ind.join("");
index.innerHTML=ret;

answered Sep 28, 2016 at 21:03

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Comments

Marcin · Accepted Answer · 2016-09-28 21:04:47Z

0

You can get first character, insert it with a different font color and then add rest of the content:

var span = $('.design span');
var html = span.html();

span.html("<span style='color:red;'>"+ html.charAt(0)  +"</span>" + html.substring(1,html.length));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="design">DESIGNED BY <span>Teodor Victor</span></span>

answered Sep 28, 2016 at 21:04

Marcin

1,4921 gold badge14 silver badges27 bronze badges

Comments

mlimon · Accepted Answer · 2016-09-28 21:05:26Z

0

Did you try like this ?

var header = $('.design span').text().charAt(0);
index.css('color','#f00');

Or

var header = $('.design span').text().substring(0,1);
index.css('color','#f00');

answered Sep 28, 2016 at 21:05

mlimon

6718 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to get first character of string by Jquery or javaScript?

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related