如何通過Jquery或javaScript獲取字符串的第一個字符？

Question

我有一個內跨度的跨度，我試圖獲得內跨度（t）的第一個字符並改變它的顏色。我想這樣做有很多方式與JavaScript和jQuery和它不工作

// 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>

Answer 1

您需要更換HTML：

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

Answer 2

否則跳過JavaScript並使用CSS

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

 
span { 
 
    display:inline-block; 
 
}

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

Answer 3

你可以得到第一個字符，用不同的字體顏色插入，然後添加內容的其餘部分：

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>

Answer 4

你試過這樣嗎？

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

或者

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

Answer 5

你需要的是charAt。

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