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

问题描述

在Java语言中加粗字符串的最佳方法是什么?

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":

马 ria
A ma ria
等等...

Maria
Amaria
etc...

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

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

PD:最后的字符串在

标记中.我使用有角度的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是输入文本内容var.数据是对象的数组.

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

不是 Ma 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?

哪个由浏览器呈现时看起来像:H el lo你能帮我吗?

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屋！