Javascript 使用jquery的highlite文本部分，最佳实践

我有一个包含名称的项目列表。 然后我有一个eventlistener，它检查按键事件。 若用户输入例如A，则所有以A开头的名称都应以粗体显示。因此，所有的开始都应该是大胆的

使用jquery只对字符串的一部分进行highlite的最佳方法是什么

---

感谢您的帮助

有一些jQuery插件可以突出显示文本，但我还没有看到一个能够突出显示部分单词的插件

一种可能的解决方案是将您所有的名字放在页面上，第一个字母由

标记包围，并带有一个类：

<span class='A FL'>A</span>ugustine
<span class='C FL'>C</span>arlos

---

请注意，粗体字符比普通字符更胖，因此这将产生用户可能不喜欢的“摇摆”效果。你可以考虑改变颜色。

这里有一个你可以在按键事件中调用的函数来突出显示一个搜索字符串：

function Highlight(search)
{
    $('ul > li').each(function() {
        if (this.innerHTML.indexOf(search) > -1)
        {
            var text = $(this).text();
            text = text.replace(search, "<span id='highlight' style='font-weight: bold'>" + search + "</span>");
            $(this).html(text);
        }
        else
        {
            this.innerHTML = $(this).text();
        }
    });
}

功能突出显示（搜索）
{
$（'ul>li'）。每个（函数（）{
if（this.innerHTML.indexOf（search）>-1）
{
var text=$（this.text（）；
text=text.replace（搜索“+”搜索+”）；
$（this）.html（文本）；
}
其他的
{
this.innerHTML=$（this.text（）；
}
});
}

测试html：

<ul id='list'>
    <li>Bob Jones</li>
    <li>Red Smith</li>
    <li>Chris Edwards</li>
</ul>

鲍勃琼斯
红史密斯
克里斯·爱德华兹

它没有Pointy的答案那么优雅，但它处理了匹配字符串的要求。

感谢您的帮助。。。 我找到了答案，详细的解决方案如下：

    var communities = $('#mylist').find('.name');
    var temp_exp = new RegExp("^("+match_string+")","i");
    communities.each(function(i){
        var current = $(this);
        var name = current.text();
        name = name.replace(temp_exp, '<b>$1</b>');
        current.html(name);
    });

var communities=$（'#mylist'）.find（'.name'）；
var temp_exp=new RegExp（“^”（“+match_string+”），“i”）；
社区。每个功能（一）{
var current=$（此）；
var name=current.text（）；
名称=名称。替换（临时扩展，$1'）；
current.html（名称）；
});

---

虽然所有项目都必须有类“name”。

@helle…此列表是标记吗？也许一点代码会有用不，它不是选择列表，它只是一个元素列表。所以它可以是表中的行，也可以是html列表中的li标记。我通过classeshmm使用jquery访问它们。。我想了想。这样，我必须在每个标志周围加上跨距。我实际上要把它扩展到匹配字符串。如果你写“carl”CARLos应该是高尚的。。。不容易，不是吗？如果你想这么做，那么你需要一些不同的东西。以下是一些代码：

    var communities = $('#mylist').find('.name');
    var temp_exp = new RegExp("^("+match_string+")","i");
    communities.each(function(i){
        var current = $(this);
        var name = current.text();
        name = name.replace(temp_exp, '<b>$1</b>');
        current.html(name);
    });