Highlight von Wörtern/Zahlen in einem Text

P

Peme

Mitglied
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
 
M.L.

M.L.

Top Contributor
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
 
X

Xyz1

Gast
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>
 
P

Peme

Mitglied
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
 
M.L.

M.L.

Top Contributor
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)
 
Ähnliche Java Themen
  Titel Forum Antworten Datum
M Suche: Teile von Wörtern finden und dann Seiten einblenden Angular, React, JQuery - Fragen zu JavaScript 13
P Zahlen sortieren Angular, React, JQuery - Fragen zu JavaScript 11
P Zahlen in JavaScript Angular, React, JQuery - Fragen zu JavaScript 3
ARadauer zahlen parsen Angular, React, JQuery - Fragen zu JavaScript 2

Ähnliche Java Themen

Aktuelle Jobs

Neue Themen


Oben