Linuchs: Zeichen färben

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:

taktstriche.png

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

  1. 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

    1. Hallo Andreas,

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

      Per CSS kann man nicht bestimmte Zeichen ansprechen?

      Gruß, Linuchs

      1. @@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 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann

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

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