Hervorhebung von Textteilen mit Jquery, bewährte Praxis

Question

Ich habe eine Liste von Elementen, die Namen enthalten. dann habe ich einen Eventlistener, der auf Tastendruck-Ereignisse prüft. Wenn der Benutzer z.B. ein A eintippt, sollten alle Namen, die mit einem A beginnen, mit dem fetten A angezeigt werden, d.h. alle beginnenden As sollten fett sein.

Was ist der beste Weg mit Jquery, um nur einen Teil einer Zeichenkette hervorzuheben?

Danke für Ihre Hilfe

Answer 1

Es gibt jQuery-Plugins zur Texthervorhebung, aber ich habe noch keines gesehen, das Teile von Wörtern hervorhebt.

Eine mögliche Lösung wäre, alle Namen auf die Seite zu setzen, wobei der erste Buchstabe von einem <span> Tag, mit einer Klasse:

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

Sie können dann jQuery verwenden, um mit diesen nach Klassennamen zu fummeln.

$('whatever').keypress(function(ev) {
  var k = e.which.toUpperCase();
  $('#textContainer span.FL').css('font-weight', 'normal');
  $('#textContainer span.' + k).css('font-weight', 'bold');
});

Beachten Sie, dass fette Zeichen dicker sind als normale Zeichen, so dass dies einen "wackeligen" Effekt haben wird, den Ihre Benutzer möglicherweise nicht mögen. Vielleicht sollten Sie stattdessen die Farbe ändern.

Answer 2

Hier ist eine Funktion, die Sie während des Tastendruck-Ereignisses aufrufen können, um einen Suchbegriff zu markieren:

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();
        }
    });
}

Test html:

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

Es ist nicht ganz so elegant wie die Antwort von Pointy, aber es erfüllt die Anforderung der übereinstimmenden Zeichenketten.

Answer 3

Danke für deine Hilfe... Ich habe es herausgefunden und die detaillierte Auflösung kommt hier:

    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);
    });

während alle Elemente die Klasse "Name" haben müssen.