Bold part of String

Issue

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

Solution

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.

Answered By - Mike Hamilton