tag:forum.selfhtml.org,2005:/self Zeichen färben – SELFHTML-Forum 2018-10-26T06:10:10Z https://forum.selfhtml.org/self/2018/oct/26/zeichen-faerben/1735090?srt=yes#m1735090 Linuchs 2018-10-26T04:41:56Z 2018-10-26T04:41:56Z Zeichen färben <p>Moin,</p> <p>in Liedtexten nutze ich das Zeichen <code>|</code> als Taktstrich.</p> <p>Nun möchte ich alle <code>|</code> rot einfärben. Mit css funktioniert es so nicht:</p> <pre><code class="block language-css"> <span class="token selector">p[|]</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> #f00<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Mit javascript leider so auch nicht:</p> <pre><code class="block language-js">document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span> <span class="token string">"body"</span> <span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span> <span class="token string">"body"</span> <span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>innerHTML<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">|</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token string">"<b class=crot>|</b>"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Seltsamer Effekt: Dieser js-code fügt zwischen Zeichen den roten Taktstrich ein, wobei die HTML-Angaben zerstört werden:</p> <p><a href="/images/03896ade-c2f3-4017-b5a5-22870cd3c773.png" rel="noopener noreferrer"><img src="/images/03896ade-c2f3-4017-b5a5-22870cd3c773.png?size=medium" alt="taktstriche.png" title="taktstriche.png" loading="lazy"></a></p> <p>Wie lasse ich die Taktstriche erröten? (zweideutiger Witz hat auch nicht geholfen )</p> https://forum.selfhtml.org/self/2018/oct/26/zeichen-faerben/1735091?srt=yes#m1735091 MudGuard http://www.andreas-waechter.de/ 2018-10-26T04:52:21Z 2018-10-26T04:52:21Z Zeichen färben <p>Hi,</p> <blockquote> <p>in Liedtexten nutze ich das Zeichen <code>|</code> als Taktstrich.</p> <p>Nun möchte ich alle <code>|</code> rot einfärben. Mit css funktioniert es so nicht:</p> <pre><code class="block language-css"> <span class="token selector">p[|]</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> #f00<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> </blockquote> <p>[] ist für Attributselektoren. | ist kein Attribut.</p> <blockquote> <pre><code class="block language-js">document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span> <span class="token string">"body"</span> <span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span> <span class="token string">"body"</span> <span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>innerHTML<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">|</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token string">"<b class=crot>|</b>"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> </blockquote> <p><code>replace(/|/g, </code> sagt: ersetze nichts ODER nichts, sooft es vorkommt. Das <code>|</code> ist im Regex das ODER.</p> <p><code>|</code> hat eine Sonderbedeutung im regulären Ausdruck - wenn Du wirklich das Zeichen <code>|</code> finden (und ersetzen) willst, mußt Du es im Regex escapen. Also <code>/\|/g</code></p> <blockquote> <p>Seltsamer Effekt: Dieser js-code fügt zwischen Zeichen den roten Taktstrich ein, wobei die HTML-Angaben zerstört werden:</p> </blockquote> <p>Das ist kein seltsamer Effekt, das ist das erwartete Verhalten. "Nichts" findet sich jeweils zwischen zwei Zeichen, und dieses "Nichts" wolltest Du ja durch <code><b class=crot>|</b></code> ersetzt haben. Daß das auch zwischen den Zeichen der Tags passiert, ist logisch, Du bearbeitest ja innerHTML.</p> <p>cu,<br> Andreas a/k/a MudGuard</p> https://forum.selfhtml.org/self/2018/oct/26/zeichen-faerben/1735093?srt=yes#m1735093 Linuchs 2018-10-26T05:43:40Z 2018-10-26T05:43:40Z danke <p>Hallo Andreas,</p> <p>danke, das <code>/\|/g</code> funktioniert mit Javascript.</p> <p>Per CSS kann man nicht bestimmte Zeichen ansprechen?</p> <p>Gruß, Linuchs</p> https://forum.selfhtml.org/self/2018/oct/26/zeichen-faerben/1735097?srt=yes#m1735097 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-10-26T06:10:10Z 2018-10-26T06:10:10Z danke <p>@@Linuchs</p> <blockquote> <p>Per CSS kann man nicht bestimmte Zeichen ansprechen?</p> </blockquote> <p>Per CSS kann man u.U. das erste Zeichen ansprechen.<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> <sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup></p> <p>Per CSS kann man Elementknoten im DOM ansprechen. Nicht Textknoten, schon gar nicht Teile davon.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p><a href="https://www.w3.org/TR/selectors-3/#first-letter" rel="nofollow noopener noreferrer">https://www.w3.org/TR/selectors-3/#first-letter</a> <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> <li id="fn2" class="footnote-item"><p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter" rel="nofollow noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter</a> <a href="#fnref2" class="footnote-backref">↩︎</a></p> </li> </ol> </section>