ハッシュタグ機能を実装しようと考えており、
第一歩のクライアント側の実装として、投稿の中から「#」が含まれるか判別し、ハッシュタグの部分の文字列をリンク化したコードをjQueryで書いてみましたが、どうしても無理やり感があり、実装のアプローチにもっと良い手段があるかもしれないと考え、投稿させていただきました。
よりスマートな書き方の発想があればぜひフィードバックいただけると嬉しいです。
既存コードの方針としては以下です。
1.投稿にハッシュタグにあたる文字「#」があるか調べる
2.あれば#の数だけ文字列を分割する
3.分割したあと、リンク化する部分はリンク化し、そうでないものはそのまま
4.htmlとしてappendする
HTML
1 <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> 2 <p>何も入力せずに送信ボタンをクリックして下さい</p> 3 <input type="text" id="txt" value="xx #xx #ほげほげ ああああ"> 4 <button id="btn">送信</button> 5 <div id="result"></div> 6
JavaScript
1 2 <script> 3 //Twitterのように投稿から投稿からハッシュタグが含まれるものをリンクに変えるコードのhtml、JSのみ 4 //一つの投稿に #がついている文字列は、スペースが空くかそれ以降何もないとハッシュタグとみなされる 5 //ハッシュタグとみなされた投稿は#から終わりまで、リンク(<a>#文字列</a>)で囲まれる 6 //一つの投稿はいくつでもハッシュタグを持てる 7 8 //ランダムにサンプル文字を入力する用 9 let arr = ["xx #xyz #ほげほげ ふがふが", "こんにちは! #hello", "お世話になっております", "#React.js #JavaScript #エンジニア #デザイナー"]; 10 var num = Math.floor(Math.random() * arr.length) 11 $('#txt').val(arr[num]); 12 $("#btn").on('click',function(){ 13 let val = $('#txt').val(); 14 let result = ""; 15 //文字列中にハッシュタグがあれば 16 if(val.indexOf("#") != -1 ){ 17 //文字列を分割 18 let txtArray = val.split("#"); 19 console.log(txtArray);//["xx ", "xx ", "ほげほげ ああああ"] 20 //resultに格納していく 21 for (let i = 0; i < txtArray.length; i++) { 22 // 最初のものは除外する 23 if( i == 0){ 24 result += txtArray[i] + " "; 25 }else{ 26 result += chkIsHashTagEnd(txtArray[i]); 27 } 28 } 29 //文字列中にハッシュタグがなければ 30 }else{ 31 //結果は入力した値にする 32 result = val; 33 } 34 //ハッシュタグが含まれる文字列を、更にハッシュタグ部分とそうでない2つに分けて返す関数 35 function chkIsHashTagEnd(str){ 36 let returnStr; 37 //ハッシュタグ部分がスペースで分かれているか、分かれていないか(=ハッシュタグ部分以降に文字が存在せず、文が終わっているか)を判定し、前者ならハッシュタグ部分のみリンク化、後者ならすべてリンク化 38 if(str.indexOf(" ") != -1 || str.indexOf(" ") != -1){ 39 returnStr = str.split(" "); 40 return changeAnchr(returnStr[0]) + " " + returnStr[1]; 41 }else{ 42 return changeAnchr(str); 43 } 44 } 45 //ハッシュタグ部分をリンク化する 46 function changeAnchr(str){ 47 return `<a href="">#${str}</a>`; 48 } 49 //結果 50 $("#result").append(result + "<br>"); 51 //ここからは入力の手間を省くよう 52 let arr = ["xx #xyz #ほげほげ ふがふが", "こんにちは! #hello", "お世話になっております", "#React.js #JavaScript #エンジニア #デザイナー"]; 53 var num = Math.floor(Math.random() * arr.length); 54 $('#txt').val(arr[num]); 55 }); 56 </script> 57 58
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/13 08:42