字符串的粗体部分 [英] Bold part of String

问题描述

在 Javascript 中加粗部分字符串的最佳方法是什么?

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.

例如，如果您在输入中写入sa"，它会自动在数组中搜索名称中包含sa"字符串的对象.

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.

例如，如果我搜索Ma":

For example, if I search for "Ma":

玛里亚
Ama​​ria
等等...

Maria
Amaria
etc...

我需要一个不使用 jQuery 的解决方案.感谢帮助.

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

PD:最后的字符串在

标签中.我使用 angular ng-repeat 创建了一个列表.

PD: The final strings are in the

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

这是代码:

$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 是输入文本内容变量.而数据是对象数组.

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

在这段代码中，如果 ModelCiudad 是ma"，则每个

的结果是:

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

is:

<b>Ma</b>ria

不是玛里亚

推荐答案

您可以使用 Javascript 的 str.replace() 方法，其中 str 等于所有您要搜索的文本.

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

以上只会替换 substr 的第一个实例.如果要处理替换字符串中的多个子字符串，则必须使用带有 g 修饰符的正则表达式.

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>');
}

在实践中调用 boldString 看起来像:

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?

浏览器呈现的内容如下:Hello can you help me?

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

这是一个带有示例的 JSFiddle:https://jsfiddle.net/1rennp8r/3/

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

简洁的 ES6 解决方案可能如下所示:

A concise ES6 solution could look something like this:

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

其中str是要修改的字符串，substr是要加粗的子字符串.

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

ES12 引入了一种新的字符串方法 str.replaceAll()，如果一次替换所有出现，则无需使用正则表达式.在这种情况下它的用法看起来像这样:

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

---

我应该提到，为了使后一种方法起作用，您的环境必须支持 ES6/ES12(或使用 Babel 之类的工具进行转译).

---

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.

这篇关于字符串的粗体部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！