- ベストアンサー
「～」の前後に改行を入れたい
ページの中に「～」が会った場合にその前後に改行(<br />)を入れたいです。 javascriptかjqueryでどうにか実現できないでしょうか？
- tamamayan
- お礼率17% (25/145)
- JavaScript
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
No.4 の補足に対して querySelectorAll('body *') <p id=kara> の内部を全部対象とするなら → querySelectorAll('p#kara, p#kara *') <p id=kara> の内部に<a>とか<span>とか<script>があって、 そちらは対象外にしたいなら → querySelectorAll('p#kara')
その他の回答 (4)
- Ogre7077
- ベストアンサー率65% (170/258)
まじめに処理するなら // HTML5 <script>window.addEventListener('DOMContentLoaded', function(ev){ var A = function(list){return Array.prototype.slice.apply(list)}; A(document.querySelectorAll('body *')).forEach(function(elem){ if (elem.tagName == 'SCRIPT') return; // TODO 対象外の要素をここに指定 A(elem.childNodes).filter(function(node){ return node.nodeName == '#text' && (''+node.nodeValue).indexOf('～') >= 0; }).forEach(function(text){ var p = text.parentNode, s = text.nextSibling; var x = text.data.split('～').map(function(t){return document.createTextNode(t)}); p.replaceChild(x[0], text); for (var i = 1; i < x.length; i++) { p.insertBefore(document.createElement('br'), s); p.insertBefore(document.createTextNode('～'), s); p.insertBefore(document.createElement('br'), s); p.insertBefore(x[i], s); } }); }); }, false)</script>
- eden3616
- ベストアンサー率65% (267/405)
>何故かこれでは動作がしませんでした。 >書き方が間違っていたりしますか？ ん？動作しますが。 IDタグの記述に間違いがないですか？ IE10、chrome36.0、Firefox31.0で確認 A～B～C A ～ B ～ C ■サンプル <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>test</title> <script type="text/javascript"> <!-- window.onload = function() { document.getElementById('kara').innerHTML = document.getElementById('kara').innerHTML.replace(/～/g, "<br \/>～<br \/>") } --> </script> </head> <body> <p>A～B～C</p> <p id="kara">A～B～C</p> </body> </html>
補足
ありがとうございます。 試してみたのですが、PHPが入るとダメになってしまうようです。 ・bodyで指定すればうまく改行していた。 ・getElementById('kara')に変更すると効かなくなる。 ・<p id="kara">A～B～C</p>であれば改行される。 こういった場合でも動作させるのは可能なのでしょうか。読み込む前にjavascriptが処理をしてしまったりなんてありますか？ <p class="middle" id="kara"> <? if($cal == 1){ ?> A～B～C <? } else if($cal == 2){ ?> A～B～C <? } else if($cal == 3){ ?> A～B～C <? } else if($cal == 4){ ?> A～B～C <? } else if($cal == 5){ ?> A～B～C <? } else if($cal == 6){ ?> A～B～C <? } else { ?> A～B～C <? } ?> </p> <!--{/each}--> <script type="text/javascript"> <!-- window.onload = function() { document.getElementById('kara').innerHTML = document.getElementById('kara').innerHTML.replace(/～/g, "<br \/>～<br \/>") } --> </script>
- yambejp
- ベストアンサー率51% (3827/7415)
タグ内にあった場合どうするつもりでしょうか？ <img src="hoge.jpg" alt="A～B" width=100 height=100> ↓ <img src="hoge.jpg" alt="A<br />～<br />B" width=100 height=100> でいいの？
補足
今確認したところ、 一つ目の～は上手く改行が入っていたのですが、2個め以降の～が改行されていませんでした。 二回目以降も入れるにはどう記述すればよいでしょうか。
- eden3616
- ベストアンサー率65% (267/405)
ページ読込後に「～」を「<br />～<br />」に置換しています。 A～B～C が以下のようになります。 A ～ B ～ C ■サンプル <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>test</title> <script type="text/javascript"> <!-- window.onload = function() { document.body.innerHTML = document.body.innerHTML.replace(/～/g, "<br \/>～<br \/>") } --> </script> </head> <body> A～B～C </body> </html>
補足
ありがとうございます。 思ったように動作しました。 ただページ内の他にも～が入ってしまったようでそこでも改行が発生してしまいました。 急遽変更したい場所にid=karaを割り振ってその場所のみ改行を入れるようにしたのですが、 window.onload = function() { document.getElementById('kara').innerHTML = document.getElementById('kara').innerHTML.replace(/～/g, "<br \/>～<br \/>") } 何故かこれでは動作がしませんでした。 書き方が間違っていたりしますか？
補足
ありがとうございます。 この内容で、<p id=kara>◆</p>の◆部分を対象にする場合はどこを書き換えれば可能ですか？ body *でしょうか