如何通过 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');