Используйте регулярное выражение, чтобы выделить слово в результатах поиска, которое соответствует поисковому запросу

Question

Используйте регулярное выражение, чтобы выделить слово в результатах поиска, которое соответствует поисковому запросу

0

Я сохранил входное текстовое значение в переменной с именем id = search-query. И затем я просматриваю данные JSON, чтобы найти какой-либо соответствующий результат, а затем выводить результат на экран. Есть ли способ, которым я могу выделить слово, соответствующее запросу query-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;
          } 
});   
}

user21 02 сен. 2016, в 01:18

Источник

0

Во-первых, почему вы используете для этого jQuery? Кроме того, вы должны использовать ngBindHtml для рендеринга HTML, а не просто strings .
developer033 02 сен. 2016, в 03:50
0

я попытался ngBindHtml, но не могу вывести ответ. У вас есть способы улучшить это?
user21 02 сен. 2016, в 04:36

Теги:

jquery

angularjs

regex

ng-app

ng-repeat

3 ответа

Ещё вопросы

Во-первых, почему вы используете для этого jQuery? Кроме того, вы должны использовать ngBindHtml для рендеринга HTML, а не просто strings .
я попытался ngBindHtml, но не могу вывести ответ. У вас есть способы улучшить это?

Wiktor Stribiżew · Answer 1 · 2016-09-01T21-25-00.000Z

Вам нужно использовать $& backreference, который возвращает целое значение соответствия, но также обратите внимание, что первым аргументом для replace метода является RegExp, а не строка 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 строки с отступом). Иначе, вам нужно использовать ` backticks.
Спасибо, я поместил это в <code> и подумал, что это будет интерпретировано буквально.
<code> лучше всего подходит для применения стиля форматирования кода к пробелам.
В результате поискового запроса 'a' он печатает Germ a n Фондов. Я не хочу, чтобы слово выводилось на печать, вместо этого я хочу, чтобы слово a было жирным. Я использую угловой JS для кода.
Попробуйте .trustAsHtml() в контроллере для преобразования строки html. См. Stackoverflow.com/a/10971756/3832970

A. Lau · Answer 2 · 2016-09-01T22-19-00.000Z

Я думаю, что

var name = v.name.replace(search, "search");

должно быть

var name = v.name.replace(search, "" + search + "");

Это то, что вы хотели?

В результате поискового запроса 'a' он печатает Germ a n Фондов. Я не хочу, чтобы слово выводилось на печать, вместо этого я хочу, чтобы слово a было жирным. Я использую угловой JS для кода.

Vijai · Answer 3 · 2016-09-01T21-47-00.000Z

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

Это не сработало. потому что я вывожу ответ в элементе ng-app. Он читает как в HTML-слове