在使用jquery正則表達式之後添加diez標記

Question

我在使用正則表達式之後替換diez標記之後出現問題。您可以在此DEMO中看到確切的問題。

1）當你按下空格然後加入REGEXT＃但是 你繼續寫東西，然後問題就在這裏走過了 迭標誌被添加到每個字符後第一個問題。

2-）第二個問題是土耳其字符我不能寫ü,ş,ı,ğ,ö

$(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

因爲Shift或Ctrl鍵被釋放，即使你的事件被觸發土耳其的字符不被接受。你必須先處理它。

通過做這樣的，你必須管理你的插入符號，因爲每次keyUp事件被觸發，光標去開始時，然後你寫countersize。這是因爲文本值的重新分配。
你會更好地使用文本區域和val（）。

但是你的功能沒有實現做你想做什麼太：你是通過哈希標籤替換每個空格。而且我明白，你希望你的每個單詞都加上hashtag？

我做的最好的是。但我還是有問題，正則表達式，你可以看到：

$("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>