0

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

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

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


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

1 件の回答 1

2

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

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

const p = document.querySelector("p");

for (const node of p.childNodes) {
  if (node.nodeType == Node.TEXT_NODE) {
    const text = node.nodeValue.trim();
    if (!text || text[0] == "・") continue;
    const span = document.createElement("span");
    span.textContent = text;
    span.style.cssText = "color: red;";
    p.replaceChild(span, node);
  }
}
<p>あいうえお<br>
<br>かきくけこ<br>
・さし<br>
・たち<br>
・なに<br>
・はひ<br>
・まみ</p>

1
  • CSS ではやはり出来ないのですね。ご回答いただいたJavaScriptで期待した通り動作しました
    – re9
    Commented 2020年2月5日 10:11

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。