Highlight von Wörtern/Zahlen in einem Text

Hallo, bin neu hier im Forum und würde jemanden von euch bitten mir bei einem Javascript zu helfen. Ich habe leider keine Ahnung davon, darum versuch ich es mal hier. Hab folgendes Script gefunden auf "jsfiddle" gefunden, was das machen würde was ich suche. Das Script sollte alle gleichen Zahlen, Wörter in Groß und Kleinschreibung in einem Text automatisch hervorheben. Kann mir bitte einer dieses Script so umändern? Vielen Dank im voraus. Danke, danke :)

Hier noch der Link zum Script: https://jsfiddle.net/mfirdaus/zNLrH/

Vielen Dank
LG
Chris
 
separaten Ordner anlegen, darin drei Dateien, z.B. highlight.html, highlight.js, highlight.css
Für highlight.html dann z.B.:
HTML:
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Highlight</title>
    <link rel="stylesheet" href="highlight.css">
  </head>
  <body>
    <div id="container"> This is a red apple </div>
    <script src="highlight.js"></script>  
</body>
</html>
Den Inhalt für highlight.js und .css dann via copy'n'paste von jfiddle in die passenden Dateien einfügen. Dann die Seite im Browser aufrufen: 12488
 
Oder halt so
HTML:
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <style>
        #container [word=langweilig] {
            color: #F00;
        }

        #container [word=nicht] {
            color: green
        }
    </style>
</head>
<body>
    <div id="container">Mir ist nicht langweilig.</div>
    <script>//adapted from http://stackoverflow.com/a/10730777/1480215
        function makeHighlightable() {
            var n, a = [], walk = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
            while (n = walk.nextNode()) a.push(n);
            for (var i = 0; i < a.length; i++) {
                var newSpan = document.createElement("span")
                var words = a[i].nodeValue.replace(/[\r\n]/g, "").split(' ');
                for (var j = 0; j < words.length; j++) {
                    var escapedWord = words[j].replace(/[^a-zA-Z0-9-']/g, '').toLowerCase()
                    words[j] = '<span word="' + escapedWord + '">' + words[j] + '</span>'
                }
                words = words.join(" ")
                newSpan.innerHTML = words
                a[i].parentNode.replaceChild(newSpan, a[i])
            }
        }

        makeHighlightable()
    </script>
</body>
</html>
 
Hi, vielen Dank für eure Antworten und Lösungsvorschläge. Das funktioniert so. Ist es auch möglich, das Script so zu ändern, das es z.b. den Satz
Das ist 1 roter Apfel
Das ist das Problem, da ich keine Ahnung habe was man ändern muß, damit es einzelne Zahlen und Großschreibung auch markiert. Ich weiß ich bin hier nicht ganz richtig. Aber vielleicht hat jemand eine Lösung dafür. Dafür wäre ich euch sehr dankbar. Danke nochmals für die Antworten bis jetzt,
LG
Chris
 
Auf die Schnelle: den Text in
Code:
 <div id="container"> Das ist ein roter Apfel </div>
ändern und bei den Formatierungsoptionen
CSS:
#container [word=ein]{
    color:yellow
}

#container [word=roter]{
    color:red
}

#container [word=apfel]{
    color:#29C00B
}
ergänzen (Achtung: der Regex in der JavaScript-Anweisung würde "1" sowie "Apfel" nicht erkennen)
 
Passende Stellenanzeigen aus deiner Region:

Neue Themen

Oben