事前に変更できないHTMLに対して、後付けで(class名を付与する等して)CSS装飾を加えたい

投稿者: Anonymous

最終的にやりたいこと
下記で、・で開始されない文字列(「あいうえお」と「かきくけこ」)に対して強調表示したい

<p>あいうえお<br>
<br>かきくけこ<br>
・さし<br>
・たち<br>
・なに<br>
・はひ<br>
・まみ</p>

条件
・HTMLタグを事前に変更することはできません
※liタグなどは使用できない。行数も順番も変動する


質問
・CSSだけでは無理ですか? 先頭文字が・であるという条件分岐は疑似要素を使用してもできない?
・JavaScriptを使用すればできますか? 「先頭が・末尾が<br>」以外の行の先頭タグにclassを付与すれば良い? 後からJavaScriptでclassを付与できれば、CSSがHTMLに反映されますか?

解決

現状の CSS ではテキストノードの任意の箇所を選択出来ません。JavaScript で動的に要素を追加し、そこに装飾を追加しておく必要があります。たとえば、 Node.childNodes プロパティで子ノードを取得し、その中で条件に合致するノードを Node.replaceChild メソッドを用いて装飾を適用した要素と入れ替える、という方法があります。

今回は文書構造を変更出来ないという前提がありますが、本来であれば予め適切な要素によるマークアップを行っておくほうが JavaScript によってテキストノードを操作する負担が存在しない分だけ、楽になると思います。

_x000D_

_x000D_

const p = document.querySelector("p");_x000D_
_x000D_
for (const node of p.childNodes) {_x000D_
  if (node.nodeType == Node.TEXT_NODE) {_x000D_
    const text = node.nodeValue.trim();_x000D_
    if (!text || text[0] == "・") continue;_x000D_
    const span = document.createElement("span");_x000D_
    span.textContent = text;_x000D_
    span.style.cssText = "color: red;";_x000D_
    p.replaceChild(span, node);_x000D_
  }_x000D_
}

_x000D_

<p>あいうえお<br>_x000D_
<br>かきくけこ<br>_x000D_
・さし<br>_x000D_
・たち<br>_x000D_
・なに<br>_x000D_
・はひ<br>_x000D_
・まみ</p>

_x000D_

_x000D_

_x000D_

回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *