Jquery正規表現を使用してスペースの後にdiezタグを追加します

Question

正規表現を使用してスペースの後にdiezタグを置き換える際に問題があります。この正確な問題はDEMOで確認できます。あなたは＃が、 を追加REGEXTその後、スペースキーを押したときに書き込み何かを継続した後

の1-）第一の問題は、その後、問題は Diezの記号は、各文字に追加されここに来ることになりますさ。

2-）第二の問題は、トルコ語の文字である私はあなたのイベントは、ShiftキーまたはCtrlキーが解放された場合でも、トリガーされるのでü,ş,ı,ğ,ö

$(document).ready(function() { 
 
    $("body").on("keyup", "#text", function() { 
 
     $("#text").html($(this).text().replace(/\s{1,}/g, " #")); 
 
    }); 
 
});

.container { 
 
    position:relative; 
 
    width:100%; 
 
    max-width:600px; 
 
    overflow:hidden; 
 
    padding:10px; 
 
    margin:0px auto; 
 
    margin-top:50px; 
 
} 
 
* { 
 
    box-sizing:border-box; 
 
    -webkit-box-sizing:border-box; 
 
    -moz-box-sizing:border-box; 
 
} 
 
.addiez { 
 
    position:relative; 
 
    width:100%; 
 
    padding:30px; 
 
    border:1px solid #d8dbdf; 
 
    outline:none; 
 
    font-family: helvetica, arial, sans-serif; 
 
    -moz-osx-font-smoothing: grayscale; 
 
    -webkit-font-smoothing: antialiased; 
 
} 
 
.addiez::-webkit-input-placeholder { 
 
    /* Chrome/Opera/Safari */ 
 
    color: rgb(0, 0, 1); 
 
} 
 
.addiez[contentEditable=true]:empty:not(:focus):before { 
 
     content:attr(placeholder); 
 
     color: #444; 
 
    } 
 

 
.note { 
 
    position:relative; 
 
    width:100%; 
 
    padding:30px; 
 
    font-weight:300; 
 
    font-family: helvetica, arial, sans-serif; 
 
    -moz-osx-font-smoothing: grayscale; 
 
    -webkit-font-smoothing: antialiased; 
 
    line-height:1.8rem; 
 
    font-size:13px; 
 
} 
 
.ad_text { 
 
    position:relative; 
 
    width:100%; 
 
    padding:10px 30px; 
 
    overflow:hidden; 
 
    font-weight:300; 
 
    font-family: helvetica, arial, sans-serif; 
 
    -moz-osx-font-smoothing: grayscale; 
 
    -webkit-font-smoothing: antialiased; 
 
    line-height:1.8rem; 
 
    font-size:13px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="addiez" contenteditable="true" id="text" placeholder="Write something with space"></div> 
 
    <div class="ad_text" id="ad_text"></div> 
 
    
 
    <div class="note">For example: When you write like: Hi bro how are you? Then jquery should change this text like this: 
 
    #Hi #bro #how #are #you? I meant when user pressed space or pressed enter then add diez tag before the text like my exapmle.</div> 
 
</div>

Answer 1

トルコ語の文字が受け付けられません。書くことはできませんこれを前に管理する必要があります。

このようにすると、キーアップイベントがトリガーされるたびにキャレットが最初に移動し、カウンターサイズが書き込まれるため、キャレットを管理する必要があります。これは、テキスト値の再割り当てのためです。
あなたはtextareaとval（）を使うのがよいでしょう。

あなたの機能は、あなたが望むことをするために実装されていません。すべての空白をハッシュタグで置き換えています。あなたの言葉のすべてにハッシュタグを追加したいと思っていますか？

私がやったことは最高です。しかし、私はまだあなたが見ることができるように正規表現に問題がある：

$("body").on("keyup", "#text", function (event) { 
 
      var keyCode = event.keyCode; 
 
      // Allow: backspace, delete, tab, escape et enter 
 
      if ($.inArray(keyCode, [46, 8, 27]) !== -1 
 
       // Allow: Ctrl+A, Command+A 
 
       || (keyCode == 65 && (event.ctrlKey === true || event.metaKey === true)) 
 
       // Allow: Ctrl+Z, Command+Z 
 
       || (keyCode == 90 && (event.ctrlKey === true || event.metaKey === true)) 
 
       // Allow: home, end, left, right, down, up 
 
       || (keyCode >= 35 && keyCode <= 40)) { 
 
       // let it happen, don't do anything 
 
       return; 
 
      } 
 

 
      if ($.inArray(keyCode, [32, 9, 13]) !== -1) { 
 
       var $textarea = $(this); 
 
       var text = $textarea.val(); 
 
       text = text.replace(/(?!#)\S+/g, "#$&"); 
 

 
       $textarea.val(text); 
 
       event.preventDefault(); 
 
       event.stopPropagation(); 
 
       event.stopImmediatePropagation(); 
 
      } 
 
     });

.container { 
 
     position: relative; 
 
     width: 100%; 
 
     max-width: 600px; 
 
     overflow: hidden; 
 
     padding: 10px; 
 
     margin: 50px auto 0; 
 
    } 
 

 
    * { 
 
     box-sizing: border-box; 
 
     -webkit-box-sizing: border-box; 
 
     -moz-box-sizing: border-box; 
 
    } 
 

 
    .addiez { 
 
     position: relative; 
 
     width: 100%; 
 
     padding: 30px; 
 
     border: 1px solid #d8dbdf; 
 
     outline: none; 
 
     font-family: helvetica, arial, sans-serif; 
 
     -moz-osx-font-smoothing: grayscale; 
 
     -webkit-font-smoothing: antialiased; 
 
    } 
 

 
    .addiez::-webkit-input-placeholder { 
 
     /* Chrome/Opera/Safari */ 
 
     color: rgb(0, 0, 1); 
 
    } 
 

 
    .addiez[contentEditable=true]:empty:not(:focus):before { 
 
     content: attr(placeholder); 
 
     color: #444; 
 
    } 
 

 
    .note { 
 
     position: relative; 
 
     width: 100%; 
 
     padding: 30px; 
 
     font-weight: 300; 
 
     font-family: helvetica, arial, sans-serif; 
 
     -moz-osx-font-smoothing: grayscale; 
 
     -webkit-font-smoothing: antialiased; 
 
     line-height: 1.8rem; 
 
     font-size: 13px; 
 
    } 
 

 
    .ad_text { 
 
     position: relative; 
 
     width: 100%; 
 
     padding: 10px 30px; 
 
     overflow: hidden; 
 
     font-weight: 300; 
 
     font-family: helvetica, arial, sans-serif; 
 
     -moz-osx-font-smoothing: grayscale; 
 
     -webkit-font-smoothing: antialiased; 
 
     line-height: 1.8rem; 
 
     font-size: 13px; 
 
    }

<div class="container"> 
 
    <textarea class="addiez" id="text" placeholder="Write something with space"></textarea> 
 
    <div class="ad_text" id="ad_text"></div> 
 

 
    <div class="note">For example: When you write like: Hi bro how are you? Then jquery should change this text like 
 
     this: 
 
     #Hi #bro #how #are #you? I meant when user pressed space or pressed enter then add diez tag before the text like 
 
     my exapmle. 
 
    </div> 
 
</div>