字符串的粗体部分

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

不是 玛丽亚

原文由 Phyron 发布，翻译遵循 CC BY-SA 4.0 许可协议

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?

当浏览器呈现时，它看起来像：H el lo can you help 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 等工具进行转译）。

另一个重要注意事项是所有这些方法都 _区分大小写_。

原文由 Mike Hamilton 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这是一个 保留原始大小写 的纯 JS 解决方案（因此忽略查询的大小写）：

 const boldQuery = (str, query) => {
    const n = str.toUpperCase();
    const q = query.toUpperCase();
    const x = n.indexOf(q);
    if (!q || x === -1) {
        return str; // bail early
    }
    const l = q.length;
    return str.substr(0, x) + '<b>' + str.substr(x, l) + '</b>' + str.substr(x + l);
}

测试：

 boldQuery('Maria', 'mar'); // "<b>Mar</b>ia"
boldQuery('Almaria', 'Mar'); // "Al<b>mar</b>ia"

原文由 Geo 发布，翻译遵循 CC BY-SA 4.0 许可协议