Damit das Ganze im Browser funktioniert, müsste das in JavaScript gebaut sein, damit das Live-Highlighting möglich ist. Eine Umsetzung wäre z.B. als JavaScript-Snippet in einem Lesezeichen möglich.
Da die Seitenstruktur für JavaScript keine Anhaltspunkte liefert - die Klassennamen sind sehr generisch und es gibt viel Inline-CSS - müsste man sich wohl an den Textinhalt der Gliederungspunkte halten und beim Finden eines Worts in einem Abschnitt dessen Überschrift mit den Gliederungspunkten abgleichen. So könnte man z.B. eine Hintergrundfarbe unter den entsprechenden Gliederungspunkt legen, um zu verdeutlichen, dass in diesem Abschnitt das Wort gefunden wurde.
Das Script ist nicht ganz ohne und jemand, der sich mit JavaScript halbwegs auskennt, braucht sicher mindestens 1-2 Stunden, um das fehlerfrei zum Laufen zu bekommen. JS-Libraries zum Suchen von Text innerhalb einer Seite gibt es genügend, solche zum Highlighten von Text auch (oder diese Funktionalität ist sogar schon in der Such-Library enthalten).
Um das von dir verlinkte übersichtlichere HTML-Inhaltsverzeichnis zu integrieren, müsste übrigens der Aufbau der HTML-Seite (also auf gesetze-im-internet.de) grundlegend geändert werden. Das lässt sich nur mittelmäßig gut mit JS durchführen - man könnte sich beispielsweise an den diversen Klassen des Inhaltsverzeichnisses durchhangeln (S1, S2, ...) und dieses dann entsprechend formatieren.
Alternativ (und wenn es nur um das Aussehen bzw. die Strukturiertheit des Inhaltsverzeichnisses geht, könntest du dir mal
Stylish anschauen, ein Browser-Plugin, das es dir ermöglicht, eigenes CSS für eine Website deiner Wahl zu verwenden.
Da ich davon ausgehe, dass du die Gesetzestexte hauptsächlich zum Lernen und Nachschlagen brauchst, und nach der Art zu urteilen, wie du die Frage gestellt hast, würde ich dir empfehlen, das nicht selbst anzugehen, wenn du dich mit JavaScript noch nie beschäftigt hast - außer du hast gerade die Zeit und Motivation dafür übrig
€dit: Falls du Stylish verwenden willst:
Code:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("gesetze-im-internet.de") {
.jnhtml > div > div[class^=S],
.jnhtml > div > div[style^=text-align] {
text-align: left !important;
letter-spacing: 0em;
}
.jnhtml .S5 {
font-size: 2.5em;
font-weight: bold;
}
.jnhtml .S4 {
padding-left: 0.5em;
font-size: 2.2em;
font-weight: 500;
}
.jnhtml .S3 {
padding-left: 1.5em;
font-size: 1.9em;
font-weight: 400;
}
.jnhtml .S2 {
padding-left: 3em;
font-size: 1.5em;
font-weight: 400;
}
.jnhtml .S1 {
padding-left: 5em;
font-size: 1.3em;
font-weight: 400;
}
.jnhtml .S0 {
padding-left: 7em;
font-size: 1.1em;
font-weight: 400;
}
.jnhtml [class^=S] + [class^=S] {
margin-top: -1.5em;
}
}
... das verpasst zumindest dem Inhaltsverzeichnis schon mal ein etwas hübscheres Aussehen