Javascript 如何将配置文件图像设置为名字和姓氏的首字母？

基本上，我正在研究用户注册系统。我正在用ReactJS做前端。对于注册用户，可以选择为其配置文件添加图像如果没有配置文件的图像，则配置文件图像应包含配置文件图片的第一个和第二个名称的第一个字母，就像google plus do一样

请在下面找到示例图像。

期待着一种方法来做到这一点。。如果有内置插件或库来实现这一点，效果会更好

在中添加的css选项

• 您只需在

  div

  内部创建一个

  div

• 将内部的一个放置在整个中心，线条高度相同 随着容器的大小和

  文本对齐：居中

如果需要，还可以通过Javascript设置文本
HTML

<div id="container">
  <div id="name">
   </div>
</div>

可选Javascript

  var name = "Adam";
  var lastname = "Sandler";
  var initials = name.charAt(0)+""+lastname.charAt(0);
  document.getElementById("name").innerHTML = initials;

---

我假设您可以访问名字和姓氏。利用这一点，我编写了这段代码，它将从名字和姓氏中提取第一个字母，并应用于您的个人资料图像

$（文档）.ready（函数（）{
var firstName=$（'#firstName'）.text（）；
var lastName=$（'#lastName'）.text（）；
变量初始值=$（'#firstName'）.text（）.charAt（0）+$（'#lastName'）.text（）.charAt（0）；
var profileImage=$（'#profileImage'）.text（初始值）；
});
#profileImage{
宽度：150px；
高度：150像素；
边界半径：50%；
背景：#512DA8；
字体大小：35px；
颜色：#fff；
文本对齐：居中；
线高：150px；
利润率：20px0；
}

卡尔佩什
辛格
我的解决方案处理名称超过2个单词的用户名。我使用正则表达式提取以空格分隔的名称组件的首字母

    var matches = str.match(/\b(\w)/g);
    var acronym = matches.join('');
    document.getElementById("name_acronym").innerHTML = acronym;

从HTML代码中调用此函数，其中“name_acronym”是配置文件图片文本的id。
获取字符串第一个字符的简单方法。
甚至在某些情况下，当您使用

var firstName = $('#firstName').text();

试试这个

var firstName = "Jhon";
var initial = firstName.charAt(0);
console.log('--------', initial);

这样，您应该得到“J”作为输出，它可以写在一行中

fullName.split(' ').map(name => name[0]).join('').toUpperCase()

可运行代码段：


const fullName=document.getElementById（'fullName'）.textContent；
const initals=fullName.split（“”）.map（name=>name[0]）.join（“”）.toUpperCase（）；
document.getElementById（'profileImage'）。innerHTML=intials
#profileImage{
字体系列：Arial、Helvetica、无衬线字体；
宽度：10雷姆；
高度：10雷姆；
边界半径：50%；
背景：#0c540c；
字体大小：3.5rem；
颜色：#fff；
文本对齐：居中；
线高：10雷姆；
保证金：2rem 0；
}

Penny Liu
创建圆圈，输入文本，完成。。。你试过什么？这很直截了当…谢谢你的回复，伙计。目前我是这样做的：D，在谷歌+，他们也会不时地改变背景颜色。如果你已经这样做了。。。那么问题是什么呢？是这样还是有其他内置插件？有几种方法可以做到这一点。使用圆的图像，纯CSS。。我不知道是否有这个插件，但如果你正在寻找一个，我想告诉你的SO帮助部分。“帮助”部分解释说，此网站不应用于查找库或插件。我比你领先19秒：D代码基本相同，只是我不使用JQuery.19秒。投资于编写jQuery:p
fullName.split(' ').map(name => name[0]).join('').toUpperCase()