Question

我正在尝试创建建议的标签，首先我在用户输入时接受输入字符串，然后检查数组中长字列表中的单词，如果第一个数组中存在单词，请检查其他数组类别这个词落入，然后在输入中附加一些标记。

第一个问题：到目前为止，我只能检查一个字符串是否包含一个单词，我不知道如何搜索一个数组，这样我就能找到给定字符串中与单词匹配的单词阵列。

第二个问题

如果在keyup上找到第一个单词，任何其他keyup运行脚本，而我希望它等待另一个第二个匹配。

CODE HERE

$(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中不支持some()，keys()和forEach()函数。 9。

Answer 2

我建议你不要使用一组数组，而是使用“map” - 它的内存效率稍差，但实现起来微不足道，并且计算效率很高：

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功能 - 如果需要，可以使用“垫片”在旧版浏览器中支持它们。

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

2 个答案:

定义您的配置

定义了你的功能

连接到jQuery

工作演示