tag:forum.selfhtml.org,2005:/selfZeichen färben – SELFHTML-Forum2018-10-26T06:10:10Zhttps://forum.selfhtml.org/self/2018/oct/26/zeichen-faerben/1735090?srt=yes#m1735090Linuchs2018-10-26T04:41:56Z2018-10-26T04:41:56ZZeichen 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#m1735091MudGuardhttp://www.andreas-waechter.de/2018-10-26T04:52:21Z2018-10-26T04:52:21ZZeichen 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#m1735093Linuchs2018-10-26T05:43:40Z2018-10-26T05:43:40Zdanke<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#m1735097Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2018-10-26T06:10:10Z2018-10-26T06:10:10Zdanke<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>