0

入力テキスト値を 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;
          } 
});   
}
4

3 に答える 3

2

$&一致値全体を返す後方参照を使用する必要がありますが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>";
}

于 2016-09-01T23:25:31.067 に答える
1

そう思ってる

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

する必要があります

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

それはあなたが望んでいたものですか？

于 2016-09-01T23:23:42.273 に答える
1 

content=document.getElementById("content");

content.innerHTML=content.innerHTML.replace(/search/gi,"<b>$&</b>");
<div id="content">This my search text</div>

これを試してみてください

v.name.innerHTML=v.name.innerHTML.replace(/search/gi,"<b>$&</b>");
于 2016-09-01T23:26:41.073 に答える