web-dev-qa-db-ja.com

プロフィール画像を姓名の最初の文字として設定するにはどうすればよいですか？

基本的に、ユーザー登録システムに取り組んでいます。 ReactJSを使用してフロントエンドを実行しています。登録ユーザーには、プロファイルに画像を追加するオプションがあります。 プロフィールの画像がない場合、プロフィール画像には、google plus doのように、プロフィール画像の最初と2番目の名前の最初の文字を含める必要があります。

下のサンプル画像を見つけてください。

enter image description here

これを行う方法を楽しみにしています..これを行う組み込みのプラグインまたはライブラリがある場合はより良いです。

javascriptjquerycsshtmlreactjs
11
sameera danthanarayana

私はあなたが名と姓にアクセスできると仮定しました。それを使用して、名と姓の最初の文字を取り、あなたのプロフィール画像に適用するこのコードを書きました。

$(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>
26
Kalpesh Singh

JsFiddle に追加されたcssオプション

  • divの内部にdivを作成するだけです。
  • line-heightをコンテナのサイズと同じにし、text-align: centerを使用して、内側のものを完全な中央に配置します。

必要に応じて、JavaScriptでテキストを設定することもできます。
[〜＃〜] html [〜＃〜]

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

[〜＃〜] 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;
}

オプションのJavascript

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

私のソリューションは、2語を超える名前のユーザー名を処理します。 regexを使用して、スペースで区切られた名前コンポーネントの最初の文字を抽出しました。

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

これを含むこの関数をHTMLコードから呼び出します。「name_acronym」はプロフィール写真のテキストのIDです。

3
zinngg

文字列の最初の文字を取得する簡単な方法。そして、あなたが使用しているとき、あなたは$を未定義として得るかもしれません

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

これを試して ...

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

これにより、出力として「J」が表示されます。

1
Sukshith S