Javascript 粗体字

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

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

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

当我打印所有名称时，我想将名称中与输入文本相符的部分加粗

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

Maria
Amaria
等等

我需要一个不使用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>");
                };

$scope.users=数据；
对于（var i=data.length-1；i>=0；i--）{
数据[i].name=data[i].name.replace（$scope.modelCiudad，“+$scope.modelCiudad+”）；
};

ModelCiudad是输入文本内容变量，data是对象数组

在该代码中，例如，如果ModelCiudad为“ma”，则每个

的结果为：

<b>Ma</b>ria

Maria

---

您可以使用Javascript的

str.replace（）

方法，其中

str

等于要搜索的所有文本

var str = "Hello";
var substr = "el";
str.replace(substr, '<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?

---

我应该提到的是，为了使后一种方法发挥作用，您的环境必须支持ES6/ES12（或者使用Babel之类的工具进行传输）

---

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

我今天遇到了类似的问题-除了我想匹配整个单词而不是子字符串。因此，如果

const text='quick brown foxes jumped'

和

const word='foxes'

，我希望结果是

'quick brownfoxesjumped'

；然而，如果

const word='fox'

，我预计不会有任何变化

我最终做了类似于以下的事情：

const pattern = `(\\s|\\b)(${word})(\\s|\\b)`;
const regexp = new RegExp(pattern, 'ig'); // ignore case (optional) and match all
const replaceMask = `$1<strong>$2</strong>$3`;

return text.replace(regexp, replaceMask);

const模式=`（\\s|\\b）（${word}）（\\s|\\b）`；
const regexp=新的regexp（模式'ig'）；//忽略大小写（可选）并匹配所有
const replaceMask=`$1$2$3`；
返回text.replace（regexp，replaceMask）；

---

首先我得到确切的单词，它在一些空格或单词边界之前/之后，然后我用相同的空格（如果有）和单词替换它，除了单词被包装在

标记中之外。

如果您想在react/javascript中为单词或单个字符的索引设置样式，我提供了一个版本

replaceAt( yourArrayOfIndexes, yourString/orArrayOfStrings ) 

工作示例：

函数替换（索引数组，[…字符串]）{
const replaceValue=i=>string[i]={string[i]}；
forEach索引（replaceValue）；
返回字符串；
}

这是另一种替代方法

function replaceAt(indexArray, [...string]) {
    const startTag = '<b>';
    const endTag = '</b>';
    const tagLetter = i => string.splice(i, 1, startTag + string[i] + endTag);
    indexArray.forEach(tagLetter);
    return string.join('');
}

函数替换（索引数组，[…字符串]）{
常数startTag=''；
const endTag=''；
const tagLetter=i=>string.splice（i，1，startTag+string[i]+endTag）；
forEach索引（标记字母）；
返回字符串。join（“”）；
}

还有一个

function replaceAt(indexArray, [...string]) {
    for (let i = 0; i < indexArray.length; i++) {
        string = Object.assign(string, {
          [indexArray[i]]: <b>{string[indexArray[i]]}</b>
        });
    }
    return string;
}

函数替换（索引数组，[…字符串]）{
for（设i=0；i

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

constboldquery=（str，query）=>{
const n=str.toUpperCase（）；
const q=query.toUpperCase（）；
常数x=n.indexOf（q）；
如果（！q | | x===-1）{
return str；//提前保释
}
常数l=q.长度；
返回str.substr（0，x）+''+str.substr（x，l）+''+str.substr（x+l）；
}

测试：

boldQuery（'Maria'，'mar'）；//“玛丽亚”
boldQuery（'Almaria'，'Mar'）；//“阿尔玛里亚”

的可能重复项请分享您尝试的内容。比

更合适的标记可能是

，它表示在特定上下文中因其相关性而突出显示的文本。突出显示搜索匹配是

标记的完美使用。嗨，米歇尔！我测试了你的解决方案，但不起作用。如果我有你的例子，结果是：所有你想搜索的文本。我已经用更好的代码和一个JSFIDDLE更新了我的答案我理解你的代码michel。如果你能看到我更新的问题。我使用angular创建一个使用数据[x].name的名称列表。b标记已转换为字符串：（首先尝试实现我上面的代码，因为replace只会找到匹配的第一个实例，上面的代码会遍历整个字符串。最好在文本呈现后执行搜索和加粗功能，而不是存储结果然后呈现。在这种情况下，不更改字符串，而不是旧的和不旧的都是b标签。我不会更新

的innerhtml，因为列表是数字的。当用户写另一封信时，列表会改变。这可能是问题所在？我可以在用户写另一封信时执行一个函数，实现所有新创建的li，但我会在创建li之前更改字符串。PD：如果使用Div-ta问题是一样的

replaceAt( yourArrayOfIndexes, yourString/orArrayOfStrings ) 

function replaceAt(indexArray, [...string]) {
    const replaceValue = i => string[i] = <b>{string[i]}</b>;
    indexArray.forEach(replaceValue);
    return string;
}

function replaceAt(indexArray, [...string]) {
    const startTag = '<b>';
    const endTag = '</b>';
    const tagLetter = i => string.splice(i, 1, startTag + string[i] + endTag);
    indexArray.forEach(tagLetter);
    return string.join('');
}

function replaceAt(indexArray, [...string]) {
    for (let i = 0; i < indexArray.length; i++) {
        string = Object.assign(string, {
          [indexArray[i]]: <b>{string[indexArray[i]]}</b>
        });
    }
    return string;
}

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"