如何檢查給定字符串中數組中的單詞是否存在

Question

我正在嘗試創建建議的標簽，首先我在用戶輸入時獲取輸入字符串，然后檢查數組中單詞的長列表中的單詞，如果單詞存在於第一個數組中，請檢查該單詞屬於其他數組類別放入，然后在輸入中附加一些標簽。

第一個問題 ：到目前為止，我只能檢查字符串中是否包含單詞，我不知道如何搜索數組，因此我可以在給定字符串中找到與數組中的單詞匹配的單詞。

第二層

如果在keyup上找到第一個單詞，則任何其他keyup都會運行腳本，而我希望它等待另一個第二次匹配。

此處代碼

$(document).on('keyup','.Post_TextArea',function(){
    post_val = $(this).val();
    if ($(this).val().length > 5){
        var string_g = 'tempo';
        var web_array = ['html', 'css', 'JavaScript'];
        var music_array = ['tempo', 'blues', 'rhythm'];
                if (post_val.toLowerCase().indexOf(string_g) >= 0){
                    if ($.inArray(string_g, web_array) !== -1){
                        $('.tags_holder').append('<span class="Tag_Style">Web</span>');
                    } else if ($.inArray(string_g, music_array) !== -1){
                        $('.tags_holder').append('<span class="Tag_Style">Music</span>');
                    } 
                    }
        }
    })

Answer 1

您可以執行以下幾項操作來解決問題：

• 創建可重復使用的組件
• 確保每個功能執行一項任務

這是我對這個問題的看法。

定義您的配置

我們可以創建一個分類法來對您的單詞進行分類。 在這種情況下，我們可以將單詞分組到一個數組中，並通過鍵對其進行分類。

var taxonomy = {
    'web': ['html', 'css', 'javascript'],
    'music': ['tempo', 'blues', 'rhythm']
};

定義你的功能

在這里，我們創建兩個函數。 我們想要實現的是：

• 用於檢查分類法中包含的單詞的謂詞
• 返回單詞分類的函數

以下是檢查wordList中是否包含單詞的謂詞。 我們可以在檢查單詞是否為“標記”單詞時使用它。

function contains(wordList) {
    return function(word) {
        return (wordList.indexOf(word) > -1);
    };
};

下面是一個函數，它從輸入中返回單詞標簽列表。 這樣做的關鍵是使用some()函數，該函數的重量應比filter()函數輕。

function getTags(input, taxonomy) {
    var words = input.match(/\w+/g);

    return Object.keys(taxonomy)
          .reduce(function(tags, classification) {
              var keywords = taxonomy[classification];
              if (words.some(contains(keywords)))
                  tags.push(classification);
              return tags;
          }, []);
};

連接到jQuery

現在我們有了核心代碼，我們可以將其連接到jQuery。

$(function() {
    $('#input').on('keyup', function() {
        $('#tags').empty();
        var tags = getTags($(this).val(), taxonomy);
        tags.forEach(function(tag) {
            $('#tags').append($('<li>').text(tag));
        });
    });
});

工作演示

觀看此jsFiddle進行實時演示。 注意：這僅在IE9 +上有效，因為IE <9中不支持some() ， keys()和forEach()函數。

Answer 2

我建議您不要使用一組數組，而應使用“映射”-內存效率略低，但實現起來卻微不足道，並且計算效率很高：

var tags = {
    'html': 'web', 'css': 'web', 'javascript': 'web',
    'tempo': 'music', 'blues': 'music', 'rhythm': 'music'
};

function suggestTags(input) {
    var result = { };
    var words = input.toLowerCase().split(/\s+/);
    words.forEach(function(word) {
        if (word in tags) {
            result[tags[word]]++;
        }
    }
    return Object.keys(result);
};

恕我直言，這里的重點是，以上內容獨立於任何DOM操作。 通過將單詞搜索與DOM邏輯分開，您將獲得更簡潔的代碼。

注意：以上某些功能使用ES5功能-如果需要，請在較舊的瀏覽器中使用“墊片”來支持它們。