[英]Jquery - Get First character of word after space
Used below HTML & JS to get first character of string and display.下面使用 HTML & JS 获取字符串的第一个字符并显示。 Manually its possible to calculate and get value.
手动计算和获取价值是可能的。
When its goes to dynamic and name with only first and last name not sure how to calculate character position after space and get first character of word.当它进入动态和只有名字和姓氏的名字时,不确定如何计算空格后的字符 position 并获取单词的第一个字符。
$('.splitname.fname').html(name.charAt(0)); $('.splitname.mname').html(name.charAt(8)); $('.splitname.lname').html(name.charAt(16));
<div class="name">Desmond Patrick Reymond</div> <div class="splitname"> <span class="fname">D</span> <span class="mname">P</span> <span class="lname">R</span> </div>
Use this logic:使用此逻辑:
"Desmond Patrick Reymond".split(" ").map(name => name[0])
// => ["D", "P", "R"]
If you need to modify the HTML programmatically, do:如果您需要以编程方式修改 HTML,请执行以下操作:
let s = $('.name').text();
s.split(" ").map(name => $('.splitname').append(name[0]))
(It's not really good practice to use map
for side effects though; you may choose to use forEach
instead.) (尽管使用
map
来产生副作用并不是很好的做法;您可以选择使用forEach
。)
You can simply use match() function and a simple ReGex
to get the dynamic text data with spaces
without having to check for charAt()
您可以简单地使用match()
ReGex
和一个简单的正则表达式来获取带spaces
的动态文本数据,而无需检查charAt()
//get text let name = $('.name').text(); //match the spaces var matches = name.match(/\b(\w)/g); // [D,P,R] //join the chars - if needed var joinChar = matches.join(''); // DPR //show the split name $('.splitname').text(joinChar); console.log(matches ) // [D,P,R] //Array console.log(joinChar) //DPR //String
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="name">Desmond Patrick Reymond</div> <div class="splitname"></div>
You can make use of Array#split
and Array#map
and Array#join
as in the demo below.您可以在下面的演示中使用
Array#split
和Array#map
以及Array#join
。 Result will be:结果将是:
<div class="splitname">
<span class="fname">D</span>
<span class="mname">P</span>
<span class="lname">R</span>
</div>
//Classes for the initials const classes = ['fname', 'mname', 'lname']; //Where to put the initials $('.splitname') //make HTML generated content of.html( //Get Full Name $('.name').text() //Break into names array.split(' ') //Get initial of each name.map(name => name.charAt(0)) //Wrap each initial in a span element.map((initial,index) => `<span class="${classes[index]}">${initial}</span>`) //Join all span elements array into string.join('') );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="name">Desmond Patrick Reymond</div> <div class="splitname"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.