Zeichen färben

[Linuchs]

Moin,

in Liedtexten nutze ich das Zeichen | als Taktstrich.

Nun möchte ich alle | rot einfärben. Mit css funktioniert es so nicht:

  p[|] {
    color: #f00;
  }

Mit javascript leider so auch nicht:

document.getElementsByTagName( "body" )[0].innerHTML
 = document.getElementsByTagName( "body" )[0].innerHTML.replace(/|/g, "<b class=crot>|</b>");

Seltsamer Effekt: Dieser js-code fügt zwischen Zeichen den roten Taktstrich ein, wobei die HTML-Angaben zerstört werden:

Wie lasse ich die Taktstriche erröten? (zweideutiger Witz hat auch nicht geholfen 😉)

[MudGuard]

Hi,

in Liedtexten nutze ich das Zeichen | als Taktstrich.

Nun möchte ich alle | rot einfärben. Mit css funktioniert es so nicht:

  p[|] {
    color: #f00;
  }

[] ist für Attributselektoren. | ist kein Attribut.

document.getElementsByTagName( "body" )[0].innerHTML
 = document.getElementsByTagName( "body" )[0].innerHTML.replace(/|/g, "<b class=crot>|</b>");

replace(/|/g, sagt: ersetze nichts ODER nichts, sooft es vorkommt. Das | ist im Regex das ODER.

| hat eine Sonderbedeutung im regulären Ausdruck - wenn Du wirklich das Zeichen | finden (und ersetzen) willst, mußt Du es im Regex escapen. Also /\|/g

Seltsamer Effekt: Dieser js-code fügt zwischen Zeichen den roten Taktstrich ein, wobei die HTML-Angaben zerstört werden:

Das ist kein seltsamer Effekt, das ist das erwartete Verhalten. "Nichts" findet sich jeweils zwischen zwei Zeichen, und dieses "Nichts" wolltest Du ja durch <b class=crot>|</b> ersetzt haben. Daß das auch zwischen den Zeichen der Tags passiert, ist logisch, Du bearbeitest ja innerHTML.

cu,
Andreas a/k/a MudGuard

[Linuchs]

Hallo Andreas,

danke, das /\|/g funktioniert mit Javascript.

Per CSS kann man nicht bestimmte Zeichen ansprechen?

Gruß, Linuchs

[Gunnar Bittersmann]

@@Linuchs

Per CSS kann man nicht bestimmte Zeichen ansprechen?

Per CSS kann man u.U. das erste Zeichen ansprechen.^{[1] [2]}

Per CSS kann man Elementknoten im DOM ansprechen. Nicht Textknoten, schon gar nicht Teile davon.

LLAP 🖖

---

1. https://www.w3.org/TR/selectors-3/#first-letter ↩︎

2. https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter ↩︎