在使用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>