Javascript 如何将个人资料图片设置为名字和姓氏的首字母？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36823343/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do i set profile image as first letters of first and last name?
提问by sameera danthanarayana
Basically, i'm working on user registration system. which i'm doing front-end using ReactJS. for registered users there is an option to add images for their profiles. when there is no images for the profiles, profile image should be contain the first letter from the first and second name for the profile picturelike google plus do.
基本上，我正在研究用户注册系统。我正在使用 ReactJS 做前端。对于注册用户，可以选择为其个人资料添加图像。当个人资料没有图片时，个人资料图片应包含个人资料图片的第一个和第二个名称的第一个字母，就像 google plus 一样。
please find the sample image below.
请在下面找到示例图片。
Looking forward a way to do this.. better if there are inbuilt plugin or library to do this.
期待一种方法来做到这一点......如果有内置的插件或库来做到这一点会更好。
回答by Kalpesh Singh
I have assumed that you have access to the first name and last name. Using that, I have written this code which will take the first letter from First name and last name and apply to your profile image.
我假设您可以访问名字和姓氏。使用它，我编写了此代码，它将从名字和姓氏中获取第一个字母并应用于您的个人资料图片。
$(document).ready(function(){
var firstName = $('#firstName').text();
var lastName = $('#lastName').text();
var intials = $('#firstName').text().charAt(0) + $('#lastName').text().charAt(0);
var profileImage = $('#profileImage').text(intials);
});#profileImage {
width: 150px;
height: 150px;
border-radius: 50%;
background: #512DA8;
font-size: 35px;
color: #fff;
text-align: center;
line-height: 150px;
margin: 20px 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="firstName">Kalpesh</span>
<span id="lastName">Singh</span>
<div id="profileImage"></div>回答by Mikelis Baltruks
The css option added in JsFiddle
JsFiddle 中添加的 css 选项
- You just create a
divinsidediv. - Put the inner one in the complete center with
line-heightthe same as container's size andtext-align: center.
- 您只需创建一个
div内部div. - 将内层放在与
line-height容器大小相同的完整中心text-align: center。
You can also have the text set by Javascript if needed.
HTML
如果需要，您还可以通过 Javascript 设置文本。
HTML
<div id="container">
<div id="name">
</div>
</div>
CSS
CSS
#container {
width: 100px;
height: 100px;
border-radius: 100px;
background: #333;
}
#name {
width: 100%;
text-align: center;
color: white;
font-size: 36px;
line-height: 100px;
}
Optional Javascript
可选的 Javascript
var name = "Adam";
var lastname = "Sandler";
var initials = name.charAt(0)+""+lastname.charAt(0);
document.getElementById("name").innerHTML = initials;
回答by zinngg
My solution takes care of user names with names having more than 2 words. I used regex to extract first letters of space separated name components.
我的解决方案处理名称超过 2 个单词的用户名。我使用正则表达式来提取空格分隔的名称组件的首字母。
var matches = str.match(/\b(\w)/g);
var acronym = matches.join('');
document.getElementById("name_acronym").innerHTML = acronym;
Call this function containing this from your HTML code and "name_acronym" is the id for the profile picture text.
从您的 HTML 代码中调用包含此内容的函数，“name_acronym”是个人资料图片文本的 ID。
回答by Sukshith S
Simple way of getting first character of a string. And even some times you might get $as undefined when your using
获取字符串第一个字符的简单方法。甚至有时您在使用时可能会得到$为 undefined
var firstName = $('#firstName').text();
try this ...
尝试这个 ...
var firstName = "Jhon";
var initial = firstName.charAt(0);
console.log('--------', initial);
by this you should get "J" as output
这样你应该得到“J”作为输出
回答by Penny Liu
It could be written in one-liner.
它可以写成一行。
fullName.split(' ').map(name => name[0]).join('').toUpperCase()
Runnable snippet:
可运行的片段：
const fullName = document.getElementById('fullName').textContent;
const intials = fullName.split(' ').map(name => name[0]).join('').toUpperCase();
document.getElementById('profileImage').innerHTML = intials;#profileImage {
font-family: Arial, Helvetica, sans-serif;
width: 10rem;
height: 10rem;
border-radius: 50%;
background: #0c540c;
font-size: 3.5rem;
color: #fff;
text-align: center;
line-height: 10rem;
margin: 2rem 0;
}<div id="profileImage"></div>
<span id="fullName">Penny Liu</span>