62800


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

[code]

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

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

* * *

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


CC BY-SA 4.0
2020-02-05T04:27:51.907
62790
2020-02-05T06:42:04.633
7886
question
javascript html css
事前に変更できないHTMLに対して、後付けで(class名を付与する等して)CSS装飾を加えたい


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

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

[code]

    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);
      }
    }
[/code]

[code]

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


CC BY-SA 4.0
2020-02-05T06:42:04.633
62800
2020-02-05T06:42:04.633
32986
62790
answer