javascript - 字符串的粗体部分

Question

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

我有一个对象数组。每个对象都有一个名称。还有一个输入参数。

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

当我打印所有名称时，我想将与输入文本一致的名称部分加粗。

例如，如果我搜索“Ma”:

马 里亚
一个 马 里亚
ETC...

我需要一个不使用 jQuery 的解决方案。帮助表示赞赏。

PD:最后的字符串在

标签。我使用 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 为“ma”，则每个

的结果

是:

<b>Ma</b>ria

不是玛丽亚

Answer 1

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

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

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

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

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

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

由浏览器呈现时，它看起来像:你好，你能帮帮我吗？
这是一个带有示例的 JSFiddle: https://jsfiddle.net/1rennp8r/3/

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

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

在哪里 str是要修改的字符串， substr是加粗的子字符串。

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

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

我应该提一下，为了使后一种方法起作用，您的环境必须支持 ES6/ES12(或使用 Babel 之类的工具进行转译)。
另一个重要的注意事项是所有这些方法都区分大小写。