如何通過 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

或者你可以跳過 JavaScript 並使用 CSS

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

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

Answer 2

你想要的是charAt 。

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

Answer 3

您需要替換 html：

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

Answer 4

您可以獲得第一個字符，使用不同的字體顏色插入它，然后添加其余內容：

 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 5

你試過這樣嗎？

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

或者

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