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

我正在尝试创建建议的标记，首先在用户键入时获取输入字符串，然后从数组中的一长串单词中检查单词，如果单词存在于第一个数组中，则检查该单词所属的其他数组类别，然后在输入中附加一些标记

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

第二个问题

在keyup上找到第一个单词if之后，任何其他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>');
                    } 
                    }
        }
    })

$（document）.on（'keyup'，'.Post_TextArea'，function（）{
post_val=$（this.val（）；
如果（$（this.val（）.length>5）{
var string_g='tempo'；
var-web_数组=['html'，'css'，'JavaScript']；
var music_数组=[“节奏”、“布鲁斯”、“节奏”]；
if（post_val.toLowerCase（）.indexOf（string_g）>=0）{
if（$.inArray（字符串、web数组）！=-1）{
$（'.tags_holder'）。追加（'Web'）；
}else if（$.inArray（字符串、音乐数组）！=-1）{
$（'.tags_holder'）。追加（'Music'）；
} 
}
}
})

我建议您不要使用一组数组，而是使用“映射”——它的内存效率稍低，但实现起来很简单，计算效率也很高：

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);
};

IMHO，这里的一个重要点是，上述操作独立于任何DOM操作。通过将单词搜索与DOM逻辑分离，您将获得更清晰的代码

---

注意：上面的一些使用ES5功能-如果需要，可以在旧浏览器中使用“垫片”来支持它们。

您可以做几件事来解决问题：

• 创建可重用组件
• 确保每个功能只执行一项任务

这是我对这个问题的看法

定义您的配置 我们可以创建一个分类法来对单词进行分类。在这种情况下，我们可以将单词分组在一个数组中，并按键对它们进行分类

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));
        });
    });
});

$（函数（）{
$（'#input'）。在（'keyup'，function（）上{
$（“#标记”）.empty（）；
var tags=getTags（$（this）.val（），分类法）；
tags.forEach（函数（tag）{
$（“#标记”）.append（$（“
”）.text（标记））；
});
});
});

工作演示 请观看此演示。注意：这只适用于IE9+，因为IE<9中不支持

some（）

、

keys（）

、和

forEach（）

函数。

查看第一个问题的用法，并匹配回调中的字符串