javascript - 在没有 jQuery 的情况下从 javascript 中的函数返回粗体/彩色搜索字符串

Question

我正在尝试用 javascript 编写一个基于名称的搜索功能。我有一个功能，我试图将搜索值与数据库相匹配。我已经为小写/大写字母匹配编写了正则表达式。找到匹配项后(甚至是下部/上部)，我需要粗体/彩色字母中的匹配字符串，该字符串在主字符串中突出显示。 例如在 Bill 中，如果搜索字符串是“bi”，那么主函数的返回值应该是 Bill。 我有一组值，我试图在这些值上执行我的搜索功能， 在我的主要功能中，

 reg = new RegExp(searchStr, 'gi');
for(var i=0; i<$scope.Arr.length ; i++)
            {
                strMatch = $scope.Arr.name.match(reg);
                tempName = $scope.Arr[i].name.replace(reg,dummy(strMatch[0]));
                console.log(tempName);
            }

我需要帮助来编写虚拟函数，我试图在其中返回粗体匹配字符串， 我试过这种方式，

 function dummy(str)
        {
            console.log(str);
            var newElement = "<span class='highlight'>" +str+ "</span>";
            console.log(newElement);
            return newElement;
        }

我得到这个输出，

<span class='highlight'>Bi</span>ll 

我需要 Bi 作为粗体/突出显示。 这是我的高亮类定义，

        .highlight
        {
            background-color:yellow;
        }

Answer 1

您的代码几乎就在那里，只是在设置 strMatch 时缺少数组索引。

strMatch = $scope.Arr[i].name.match(reg);

编辑:

您可能还希望仅有条件地执行突出显示。我建议在对 tempName 执行替换之前检查 strMatch 是否存在(使用 if(strMatch){...})。

我也不建议使用 console.log 来测试这种代码，因为您正在尝试生成 HTML(控制台无法真正以有用的方式显示)。为什么不将生成的 HTML 附加到现有的 HTML 元素，以便您可以看到真实的结果？

查看下面更新的示例代码。

document.getElementById("input").addEventListener("keyup", function() {
  document.getElementById("output").innerHTML = "";
  var searchStr = this.value;
  if (searchStr.length > 0) {
    var reg = new RegExp(searchStr, 'gi');
    var $scope = {
      Arr: [{
        name: "Bill Clinton"
      }, {
        name: "Bob Dole"
      }, {
        name: "Bilbo Baggins"
      }, {
        name: "Bing Crosby"
      }, {
        name: "Frodo Baggins"
      }]
    };
    for (var i = 0; i < $scope.Arr.length; i++) {
      var strMatch = $scope.Arr[i].name.match(reg);
      var tempName = $scope.Arr[i].name;
      if (strMatch) {
        var tempName = tempName.replace(strMatch[0], dummy(strMatch[0]));
        document.getElementById("output").insertAdjacentHTML("beforeend", tempName + "<br/>");
      }
    }
  }

  function dummy(str) {
    return "<span class='highlight'>" + str + "</span>";
  }
});

.highlight {
  font-weight: bold;
  background-color: yellow;
}

Type a name here:
<input id="input" type="text" />
<br/>
<div id="output" />