Use regex to bold the word in search result which match the search query

Question

I have stored input text value into a variable with id name=search-query. And then I am searching through the JSON data to find any matching result and then output the result on the screen. Is there a way which I can bold the word which match the 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;
          } 
});   
}

At first, why are you using jQuery for this? Also, you should use `ngBindHtml` to render the HTML, instead of just `strings`. — developer033, Sep 02 '16 at 03:50
i tried ngBindHtml but cannot output the answer. Do you have ways to improve it? — user21, Sep 02 '16 at 04:36

Wiktor Stribiżew · Answer 1 · 2016-09-01T23:29:00.903

3

You need to use a $& backreference that returns the whole match value, but also pay attention that the first argument to replace method is a RegExp, not the search string:

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

Demo:

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

edited Sep 01 '16 at 23:29

answered Sep 01 '16 at 23:25

Wiktor Stribiżew

607,720
39
448
563

how do you get the to print without it becoming HTML? – A. L Sep 01 '16 at 23:27
1

Do you mean in the post? It is part of the code (4-space indented lines). Else, you need to use `\`` backticks. – Wiktor Stribiżew Sep 01 '16 at 23:29
Thanks, I was putting it in `` and I thought it would interpret it literally. – A. L Sep 01 '16 at 23:32
1

`` is best when you need to apply code formatting style to spaces. – Wiktor Stribiżew Sep 01 '16 at 23:33
For search query of 'a', in the result, it is printing German Funds. I does not want the word to print out, instead I want like a to be bold. I'm using angular JS for the code. – user21 Sep 01 '16 at 23:35
Try `.trustAsHtml()` in the controller to convert the html string. See http://stackoverflow.com/a/10971756/3832970 – Wiktor Stribiżew Sep 01 '16 at 23:40

A. L · Answer 2 · 2016-09-01T23:34:37.837

1

I'm thinking that

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

should be

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

Is that what you wanted?

edited Sep 01 '16 at 23:34

answered Sep 01 '16 at 23:23

A. L

11,695
23
85
163

For search query of 'a', in the result, it is printing German Funds. I does not want the word to print out, instead I want like a to be bold. I'm using angular JS for the code. – user21 Sep 01 '16 at 23:42

score 1 · Answer 3 · answered Sep 01 '16 at 23:26

1

content=document.getElementById("content");

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

<div id="content">This my search text</div>

Try this one

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

answered Sep 01 '16 at 23:26

Vijai

2,369
3
25
32

It didn't work. because I am output the answer in the ng-app element. It is reading the as in html word – user21 Sep 01 '16 at 23:43

Use regex to bold the word in search result which match the search query

3 Answers3