66166


**JavaScriptで、下記のようなテキストノードを、動的に囲む要素を追加したいです。**

対象となるテキストノードには、4行までの改行が複数含まれる可能性があります。

[code]

    プログラミングに関する質問は、
    
    もちろん何でも大歓迎です。
    
    
    
    
    あなたが　
    
    初心者でも
    
    スーパークリエイターでも
    
    関係なく歓迎します。
    
    
    
    主観的であったり、
    
    炎上を招く内容であったり、
    
    長々とした議論が必要になるような質問は避けてください。
    
    
    
    自分で回答しても大丈夫です。
    
[/code]

欲しい結果

[code]

    <pre class="hoge">上記テキストノード</pre>
    
[/code]

* * *

**質問1.どういう決め打ちルールが良いですか(考えられますか)？**

  * 案a.囲みたいテキスト前後に「5行の空白行」を設定する
  * 案b.囲みたいテキスト前後に「同じ指定文字(例えば★)」を追記する
  * 案c.囲みたいテキスト前に「指定文字(例えば★)」を追記する。囲みたいテキスト後に「指定文字(例えば☆)」を追記する
  * 案d.上記以外

* * *

**質問2.どうやって実装すれば良いですか？**  
対象テキストノードは、id="divA"直下にあります

[code]

    const div = document.getElementById('divA');
    
    for (const node of div.childNodes) {
      if (node.nodeType == Node.TEXT_NODE) {
        const text = node.nodeValue;
        //この辺りの処理が分かりません
        const pre = document.createElement("pre");
        pre.classList.add('hoge'); //クラス追加
        pre.textContent = text;
        div.replaceChild(pre, node);
      }
    }
    
[/code]


CC BY-SA 4.0
2020-05-01T00:01:35.000
66164
2020-05-01T01:40:14.213
7886
question
javascript
JavaScriptで、予め決め打ちしたルールに基づきテキストノードを囲み(動的に要素を追加し)たい


一般的に置換文字列のような「メタ文字」を用意するときには、  
「メタ文字」自体が本文に影響は与えないか？メタ文字によっておこる処理に影響がないかを考えます。  
また「エスケープ文字」もセットで考える必要があります。

置換という処理で考えると、あまり頻繁に使われている文字をメタ文字に設定すると結構処理がめんどくさいと思います。例えば例題で改行をメタ文字にしてしまうと改行自体にエスケープ文字を入れる必要があり、テキスト入力時に手間が増えるでしょう。

あまり使われない文字を利用することになるようになります。  
またタグの入れ子を許可するということを考えると、開始タグおよび閉じタグが同じ文字だと入れ子の実現がちょっと大変そうです。

[code]

    <pre class="hoge">上記テキスト<pre class="hoge">ノ</pre>ード</pre>
    
[/code]

汎用性高くになると案cになるでしょう。

どの案についても開始タグと閉じタグの整合性を検討する必要がありそうですね。  
そのほかの案であればこのStackoverflowで利用されているマークアップ言語などを参考にするとよいかと思います。

エスケープ文字については利用しないこともできますが、その文字を使いたいとなった時には必要になってきます。エスケープ文字については決めの問題ですが、一般的には特殊文字を一つ用意して、あとは特殊文字を組み合わせる（連続させるとか）というやり方ですね。  
例えば  
CSVであれば`"`のエスケープ文字である`""`  
htmlであれば`<>&`のエスケープ文字`&lt;&gt;&amp;`  
等です。

置換の処理の流れですが、エスケープ文字を利用するのであれば

エスケープ文字を除いたメタ文字を置換する  
→  
エスケープ文字を除外する

という形になります。

おそらく正規表現を利用した置換処理が良いかと思いますが、  
正規表現はそれだけで大きな単元になるのでここで回答することは難しいのでまずは学習していただいてわからないことがあれば再度質問してもらう形が良いかと思います。  
[正規表現 -
JavaScript](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions)


CC BY-SA 4.0
2020-05-01T01:40:14.213
66166
2020-05-01T01:40:14.213
22665
66164
answer