javascript - 如何检查数组中的单词是否存在于给定字符串中

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']
};

定义你的函数

这里我们创建两个函数。我们想要达到的目标是:

• 检查分类中包含的单词的谓词
• 返回单词分类的函数

下面是一个谓词，用于检查单词是否包含在单词列表中。我们可以使用它来检查一个单词是否是“标记”单词。

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 不支持 some()、keys() 和 forEach() 函数<9.