CSS auf ein bestimmtes Zeichen anwenden?

2 Antworten

DnYGmR
30.01.2018, 14:42

Hi akuzma,

also normalerweise muss man im HTML DOM Klassen und IDs den Elementen zuweisen, damit man mit ihnen was anfangen kann, anders geht es nicht.

Zwar kannst du auf ein Element ohne Klassen und IDs zugreifen in dem du zum Beispiel so selektierst:

body div > p {
    color: red;
}

Aber davon rate ich dir ab! Immerhin gibt oder wird es noch mehrere Divs im DOM geben, die im Body drinnen sind. Und ebenfalls mehrere Paragraphen im jeweiligen Div.

Was du machen solltest ist im HTML DOM dem jeweiligen Element die Klasse oder ID zuweisen und diese Klasse/ID dann in CSS Regel zuzuweisen.

#text {
    color: red;
}
// oder
.text {
    color: red;
}

P.S.: Ich hoffe du weißt Klassen und IDs zu unterscheiden. :)

LG Schark ;)
regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML, CSS
30.01.2018, 14:42

Wrappe mit JavaScript alle Vorkommen des gewünschten Zeichens via span-Element:

var content = document.body.innerHTML;
document.body.innerHTML = content.replace("!", "<span class=\"marker\">!</span>");

Folgend kannst du die Klasse mit einem CSS-Selektor ansprechen:

.marker { color: red; }
Isendrak  30.01.2018, 14:49

Könnte schiefgehen wenn z.B. &excl; verwendet wird oder evtl. auch, wenn in einer JS Funktion aus != plötzlich <span class="marker">!</span>= wird... ;)

2
regex9  30.01.2018, 14:57
@Isendrak

Stimmt. Dies kann man beheben, indem man einen regulären Ausdruck formuliert, der als erstes Argument der replace-Methode übergeben wird und den Suchbereich einschränkt (bspw. statt document.body werden nur p-Elemente ausgewählt o.ä.).

Ob dies ausreicht, muss man je nach Fall dann einmal ausprobieren.

1
Isendrak  30.01.2018, 15:10
@regex9

Hehehe... regex9 hat RegEx gesagt! (naja, nicht mit genau dem Wortlaut, aber was solls...) XD

Man könnte aber auch z.B. mit document.body.children beginnen und dann durch die gesamte Baumstruktur iterieren und dabei so Dinge wie if(current_node.tagName == "script") continue; benutzen um script-Tags zu überspringen...

Dabei würde man dann vermutlich noch was wie if(current_node.children.length==0) current_node.innerHTML=current_node.innerHTML.replace('!', '<span class="marker">!</span>'); verwenden, um sicherzugehen, dass man nicht doch ein ! innerhalb eines script-, style- oder sonstigen Tags erwischt.

P.S.: Ein Problem könnten andernfalls auch so Dinge wie <img src="/foo/bar/KATZE!!!.jpg"/> darstellen...

0
Isendrak  30.01.2018, 15:17
@Isendrak

Das müsste ohne die erwähnten Probleme funktionieren:

function markExklamationMarks(element){
    if(typeof(element) === 'undefined') element = document.body;
    for(let i = 0; i < element.children.length; ++i){
        if(element.children[i].children.length > 0) markExklamationMarks(element.children[i]);
        else{
            if(
                element.children[i].tagName != 'script' && 
                element.children[i].tagName != 'style'
            ){
                element.children[i].innerHTML = element.children[i].innerHTML.replace('!', '<span class="marker">!</span>');
            }
        }
    }
}

Habs aber noch nicht getestet... ^^

0