Bold part of String

What is the best way to bold a part of string in Javascript?

I have an array of objects. Each object has a name. There is also an input parameter.

If, for example, you write “sa” in input, it automatically searches in array looking for objects with names that contain “sa” string.

When I print all the names, I want to bold the part of the name that coincide with the input text.

For example, if I search for “Ma”:

Maria
Amaria
etc…

I need a solution that doesn’t use jQuery. Help is appreciated.

PD: The final strings are in the

  • tag. I create a list using angular ng-repeat.

    This is the code:

    $scope.users = data;
                    for (var i = data.length - 1; i >= 0; i--) {
                      data[i].name=data[i].name.replace($scope.modelCiudad,"<b>"+$scope.modelCiudad+"</b>");
                    };
    

    ModelCiudad is the input text content var. And data is the array of objects.

    In this code if for example ModelCiudad is “ma” the result of each

  • is:
    <b>Ma</b>ria
    

    not Maria

  • Answer

    You can use Javascript’s str.replace() method, where str is equal to all of the text you want to search through.

    var str = "Hello";
    var substr = "el";
    str.replace(substr, '<b>' + substr + '</b>');
    

    The above will only replace the first instance of substr. If you want to handle replacing multiple substrings within a string, you have to use a regular expression with the g modifier.

    function boldString(str, substr) {
      var strRegExp = new RegExp(substr, 'g');
      return str.replace(strRegExp, '<b>'+substr+'</b>');
    }
    

    In practice calling boldString would looks something like:

    boldString("Hello, can you help me?", "el"); 
    // Returns: H<b>el</b>lo can you h<b>el</b>p me?
    

    Which when rendered by the browser will look something like: Hello can you help me?

    Here is a JSFiddle with an example: https://jsfiddle.net/1rennp8r/3/


    A concise ES6 solution could look something like this:

    const boldString = (str, substr) => str.replace(RegExp(substr, 'g'), `<b>${substr}</b>`);
    

    Where str is the string you want to modify, and substr is the substring to bold.


    ES12 introduces a new string method str.replaceAll() which obviates the need for regex if replacing all occurrences at once. It’s usage in this case would look something like this:

    const boldString = (str, substr) => str.replaceAll(substr, `<b>${substr}</b>`);
    

    I should mention that in order for these latter approaches to work, your environment must support ES6/ES12 (or use a tool like Babel to transpile).

    Another important note is that all of these approaches are case sensitive.

    Leave a Reply

    Your email address will not be published. Required fields are marked *