Highlight von Wörtern/Zahlen in einem Text

Diskutiere Highlight von Wörtern/Zahlen in einem Text im Für Verirrte - Fragen zu JavaScript Bereich.
P

Peme

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

M.L.

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

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

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

M.L.

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

Peme

Hi, danke, ich würde aber die Zahl brauchen. Ist das möglich?
LG
Chris
 
M

M.L.

Das ist im JSFiddle selbst möglich, Änderungen und Ergänzungen siehe Screenshot:12495
 
Thema: 

Highlight von Wörtern/Zahlen in einem Text

Passende Stellenanzeigen aus deiner Region:
Anzeige

Neue Themen

Anzeige

Anzeige
Oben