我試圖製作一個使用jQuery的hashtag系統,但我的代碼有問題。所以通常代碼工作正常。但是我想刪除書面主題標籤中的重複標籤。jQuery刪除重複的標籤
,當你寫的東西,然後按空格然後#
在前面的文字自動添加我創建這個DEMO上codepen.io
在這個演示。我不希望用戶能夠兩次寫入相同的單詞,例如:#abC#AbC#aBC#abC#ABC
我已經使用正則表達式創建了此代碼,但它不起作用。
// Remove duplicated hashatgs.
text = text.replace(/[#]{2,}/gi, function removeHashtags(x) { return '#'; });
這裏是全碼:
// Move cursor to the end.
function placeCaretAtEnd(el) {
el.focus();
if (typeof window.getSelection != "undefined"
&& typeof document.createRange != "undefined") {
var range = document.createRange();
range.selectNodeContents(el);
range.collapse(false);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (typeof document.body.createTextRange != "undefined") {
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.collapse(false);
textRange.select();
}
}
// Add hashtags on each word.
function addHashtags(text) {
// Add hashtag.
text = text.replace(/([\w]+)/gi, function addHashtag(x){ return '#' + x; });
// Remove duplicated hashatgs.
text = text.replace(/[#]{2,}/gi, function removeHashtags(x) { return '#'; });
// Prevent double spaces
text = text.replace(/ /g, ' ');
text = text.trim();
// return results
return text;
}
// Convert characters to charCode
function toCharCode(char) { return char.charCodeAt(0); }
// Define special characters:
var characters = new Set([
0, 32, // space
13, // enter
// add other punctuation symbols or keys
]);
var forbiddenCharacters = new Set([
toCharCode("_"),
toCharCode("-"),
toCharCode("?"),
toCharCode("*"),
toCharCode("\\"),
toCharCode("/"),
toCharCode("("),
toCharCode(")"),
toCharCode("="),
toCharCode("&"),
toCharCode("%"),
toCharCode("+"),
toCharCode("^"),
toCharCode("#"),
toCharCode("'"),
toCharCode("<"),
toCharCode("|"),
toCharCode(">"),
toCharCode("."),
toCharCode(","),
toCharCode(";")
]);
$(document).ready(function() {
var element = '#text';
$(element).keypress(function (e) {
if (characters.has(e.keyCode)) {
// Get and modify text.
var text = $(element).text();
text = addHashtags(text);
// Save content.
$(element).text(text);
// Move cursor to the end
placeCaretAtEnd(document.querySelector(element));
} else if (forbiddenCharacters.has(e.keyCode)) {
e.preventDefault();
}
});
});
.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>