javascript - 使用 Jquery 正则表达式在空格后添加 diez 标签

Question

我在使用正则表达式替换空格后的 diez 标签时遇到问题。您可以在此 DEMO 中看到确切的问题。 。

1-) First problem is when you press space then regext adding # but after you continue the write something then problem will be come here a diez sign is added to each character.

2-) Second problem is turkish characters i can not write ü,ş,ı,ğ,ö

$(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。这是du，因为文本值的重新分配。
你最好使用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>