# Highlight von Wörtern/Zahlen in einem Text



## Peme (18. Okt 2019)

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. (18. Okt 2019)

separaten Ordner anlegen, darin drei Dateien, z.B. highlight.html, highlight.js, highlight.css
Für highlight.html dann z.B.: 

```
<!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:


----------



## Xyz1 (18. Okt 2019)

Oder halt so

```
<!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>
```


----------



## Peme (20. Okt 2019)

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. (20. Okt 2019)

Auf die Schnelle: den Text in 
	
	
	
	





```
<div id="container"> Das ist ein roter Apfel </div>
```
  ändern und bei den Formatierungsoptionen 
	
	
	
	





```
#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)


----------



## Peme (20. Okt 2019)

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


----------



## M.L. (21. Okt 2019)

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


----------



## Peme (21. Okt 2019)

Wow, super...DANKE


----------

