2017-04-16 54 views
0

我試圖製作一個使用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>
你可以做

回答

1

的一件事是,在分裂和#從數組刪除重複項,然後再加入陣列# ..在做:

var unique = text.replace(/\s/g,'').split('#').filter(function(elem, index, self) { 
return index == self.indexOf(elem.replace('\s+$','')); 
}) 
text = unique.join(" #"); 

Demo

1

您可以修改AddHashtags功能是這樣的:

// Add hashtags on each word. 
function addHashtags(text) { 
    // Add hashtag. 
    text = text.replace(/([\w]+)/gi, function addHashtag(x){ return '#' + x; }); 

    // Remove duplicated words 
    text = text.replace(/\b(\w+)\b(?=.*\b\1\b)/gi, function removeDuplicates(x) { return ''; }); 

    // Prevent single/double hashtags 
    text = text.replace(/[#]{2,}/gi, function removeDoubleHashtags(x) { return '#'; }); 
    text = text.replace(/[#]{1}\s+/gi, function removeSingleHashtags(x) { return ''; }); 

    // Prevent double spaces 
    text = text.replace(/ /g, ' '); 
    text = text.trim(); 

    // return results 
    return text; 
} 

如果有重複的字會覆蓋原來的記錄,因此,如果該列表的樣子:#hashtag #HaSHtag,然後#HaSHtag將是剩下的條目。包含代碼以確保一切都小寫應該很容易,如果這就是你想要的。

用於刪除列表中重複單詞的正則表達式來自於此SO回答:https://stackoverflow.com/a/16406260/6909765