Question

我使用正则表达式创建了目录搜索，以将输入与数据进行匹配。我遵循了其中一半的教程，并自行添加了该教程。它可以在Chrome中运行，但不能在Internet Explorer中运行。

我发现这是由于Internet Explorer中ES6的不兼容所致，现在我很难弄清楚如何将我的 displayMatches 函数正确地转换为没有ES6的普通javascript或jQuery。

到目前为止，尽管我尝试使用 .join('') ，但我无法确定如何在html列表中删除逗号来匹配列表，

>

Screenshot #2 - see the commas in between?

这是Chrome上的有效代码：

function displayMatches() {
    // console.log(this.value);
    $('.suggestions').show();
    var matchArray = findMatches(this.value, employees);
    console.log(matchArray);
    var html = matchArray.slice(0,10).map(person => {
        var regex = new RegExp(this.value, 'gi');
        var firstName = person.GivenName.replace(regex, `<span class="hl">${this.value}</span>`);
        var lastName = person.Surname.replace(regex, `<span class="hl">${this.value}</span>`);
        var extension;

        if (person.Phone_Ext1 !== null){
            extension = person.Phone_Ext1;
        } else {extension = "N/A"}

        return `
            <li class="search-item" data-id=${person.EmployeeID}>
                <span class="person">${firstName} ${lastName}</span>
                <span class="phone-ext">Ext. ${extension}</span>
            </li>
        `
    }).join('');

    if ($('#search-box').val() == ""){
        suggestions.innerHTML = "";
    } else {
        suggestions.innerHTML = html;
    }
}

这是我尝试进行的转换：

function displayMatches() {
    // console.log(this.value);
    $('.suggestions').show();
    var matchArray = findMatches(this.value, employees);
    console.log(matchArray);

    var html = [];
    var person;
    var list;

    for(var i=0; i < matchArray.slice(0,10).length; i++){
        person = matchArray.slice(0,10)[i];
        var regex = new RegExp(this.value, 'gi');
        var hilight = '<span class="hl">' + this.value + '</span>';
        var firstName = person.GivenName.replace(regex, hilight);
        var lastName = person.Surname.replace(regex, hilight);
        var extension;

        if (person.Phone_Ext1 !== null){
            extension = person.Phone_Ext1;
        } else {
            extension = "N/A"
        }

        list =
            '<li class="search-item" data-id=' + person.EmployeeID +'>' +
            '<span class="person">' + firstName + ' ' + lastName + '</span>' +
            '<span class="phone-ext">Ext. ' + extension + '</span>' +
            '</li>';
        html.push(list);
    }
    html.join('');
    console.log(html);

    if ($('#search-box').val() == ""){
        suggestions.innerHTML = "";
    } else {
        suggestions.innerHTML = html;
    }
}

Answer 1

html.join('') 返回一个新字符串。它不会将数组转换为字符串，也不会为html变量分配新值。您需要做

html = html.join('');

甚至最好使用两个单独的变量，其中一个为数组，另一个为字符串。

顺便说一句，您甚至不需要自己循环构造和填充数组，而从IE9开始，您可以使用ES5 Array map method。作为@HB如注释中所述，您只需要使用function表达式即可，而无需使用箭头语法。

将功能从ES6转换为原始JavaScript以在Internet Explorer中工作的问题

1 个答案: