使用正则表达式将搜索结果中与搜索查询匹配的单词加粗答案

【问题标题】：Use regex to bold the word in search result which match the search query使用正则表达式将搜索结果中与搜索查询匹配的单词加粗
【发布时间】：2025-11-21 15:55:01
【问题描述】：

我已将输入文本值存储到 id name=search-query 的变量中。然后我正在搜索 JSON 数据以找到任何匹配的结果，然后将结果输出到屏幕上。有没有一种方法可以加粗匹配 search-query.val 的单词？

<body ng-app="products" ng-controller="ctrl"> 

 <input type="text" id="search-query" name="query" placeholder="Enter product name"></input>
 <tbody>
       <tr ng-repeat="result in searchResult|orderBy:order:reverse" >  
          <td >
               <a ng-href="{{result.link}}" target="_blank">
                    <span ng-bind="result.name" target="_blank"></span> 
                </a>
          </td>
          <td  ng-bind="result.type"></td> 
        </tr>  
 </tbody> 
</body>

var app2 = angular.module('products', []);
app2.controller('ctrl', function($scope) {  
$scope.searchResult = []; 
$scope.submit = function(){  
    var search = $("#search-query").val();
    $.each(json.products, function(i, v) {
         var regex = new RegExp(search, "i");

         if (v.name.search(regex) != -1) {  

              // For the following line, is there a way which I can bold the word which match the search-query.val?
              var name = v.name.replace(search, "<b>search</b>");   // doesn't work

              $scope.searchResult.push({ name:name, type: v.type, link: v.url }); 
              return;
          } 
});   
}

【问题讨论】：

首先，你为什么要使用jQuery呢？此外，您应该使用 ngBindHtml 来呈现 HTML，而不仅仅是 strings。
我试过 ngBindHtml 但无法输出答案。你有办法改进它吗？

标签： jquery angularjs regex ng-repeat ng-app

【解决方案1】：

您需要使用返回整个匹配值的$& 反向引用，但还要注意replace 方法的第一个参数是正则表达式，而不是search 字符串：

var name = v.name.replace(regex, "<b>$&</b>"); 
                                     ^^

演示：

var search = "DOM";
var s = "No dom here";
var regex = new RegExp(search, "i");
if (s.search(regex) != -1) {  
   document.body.innerHTML = "<pre>" + s.replace(regex, "<b>$&</b>") + "</pre>";
}

【讨论】：

如何在不变成 HTML 的情况下打印？
你的意思是在帖子里吗？它是代码的一部分（4 个空格缩进行）。否则，您需要使用` 反引号。
谢谢，我把它放在<code> 中，我认为它会按字面意思解释。
<code> 是您需要对空格应用代码格式样式的最佳选择。
对于“a”的搜索查询，结果是打印 German Funds。我不想打印出 这个词，而是希望 a 加粗。我正在为代码使用 Angular JS。

【解决方案2】：

content=document.getElementById("content");

content.innerHTML=content.innerHTML.replace(/search/gi,"<b>$&</b>");

&lt;div id="content"&gt;This my search text&lt;/div&gt;

试试这个

v.name.innerHTML=v.name.innerHTML.replace(/search/gi,"<b>$&</b>");

【讨论】：

它没有用。因为我在 ng-app 元素中输出了答案。它正在读取 就像在 html 单词中一样

【解决方案3】：

我是这么想的

var name = v.name.replace(search,"<b>search</b>");

应该是

var name = v.name.replace(search,"<b>" + search + "</b>");

这是你想要的吗？

【讨论】：

对于“a”的搜索查询，结果是打印 German Funds。我不想打印出 这个词，而是希望 a 加粗。我正在为代码使用 Angular JS。