質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

1334閲覧

<br>を<p>に変更する方法

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2018/01/31 12:49

###■やりたいこと
タイトルの通りですが、次のように<br><p>に変更したいのです。

<p>一行目<br> 二行目<br> 三行目<br></p>

↓変更↓

<p>一行目</p> <p>二行目</p> <p>三行目</p>

###■ダメだったこと
そこで下記のように書いてみたのですけれど、うまくいかないので質問させて頂きました。

javascript

1<!-- brをpに変更 --> 2<script> 3var elem = document.getElementsByTagName("br"); 4elem.innerHTML = "<p></p>"; 5</script> 6```お分かりになる方、いらっしゃいましたら、宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi-sun

2018/02/01 01:18

既に終了した質問ですが、何故わざわざ3行の文章を3つの段落に分けたいのですか?例えばSEO目的だったとして、HTMLをページ描画後にbrをJSで消去することに意味はありません。
退会済みユーザー

退会済みユーザー

2018/02/01 01:49

ご指摘ありがとうございます。目的はデザインです。文章が改行されるたびにpタグ専用のCSSをかけたかったので、brじゃちょっとお邪魔虫だった。と、こういうわけです。(∩´∀`)∩
guest

回答2

0

ベストアンサー

defghi1977 さんの回答と全く同じなのですが、昔ながらの書き方で書くとこんな感じです。defghi1977 さんの回答のコメントに書こうかと思ったのですが、ソースが崩れるのでここに書きます。複数<p>タグ版です。
https://developer.mozilla.org/ja/docs/Web/API/Element/insertAdjacentHTML

js

1var elem = document.querySelectorAll('p'); 2 3//配列なのでループ処理 4for (var i=0; i<elem.length; i++) { 5 elem[i].insertAdjacentHTML("afterend", elem[i].innerHTML 6 //<br>を区切り文字にして配列に分解 7 .split(/<br>/) 8 //空要素を除く 9 .filter(function(el) { 10 return '' !== el.replace(/^[\s]+|[\s]+$/, ''); 11 }) 12 //<p>タグにする 13 .map(function(el) { 14 return '<p>'+ el.replace(/^[\s]+|[\s]+$/, '') +'</p>'; 15 }) 16 //配列を結合 17 .join('')); 18 19 elem[i].remove(); 20}

投稿2018/01/31 17:38

Tomak

総合スコア1652

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/01/31 17:45 編集

助かります!!defghi1977さんにご提示いただいたコードを、いろいろな組み合わせをやりまくって笑、なんとかできました。。 が、意味がまったく分からず消化不良なところに、なんとお優しいご回答が…(´;ω;`)ウゥゥ どうもありがとうございます!助かりました。
defghi1977

2018/01/31 20:54

> が、意味がまったく分からず消化不良なところに、なんとお優しいご回答が…(´;ω;`)ウゥゥ ここで終わらせたらあなたはコードを全く理解せずただ文字列の切り貼りしか出来ないことになります. 必ず, 出てきた関数,forループ構文,正規表現などについて復習・整理し, ご自分の「モノ」になさって下さい.
guest

0

例えばこんな感じで.

JavaScript

1const p = document.querySelector("p");//編集対象のp要素 2p.insertAdjacentHTML("afterend", 3 p.innerHTML.split(/<br>/) 4 .filter(val => val != "") 5 .map(val => `<p>${val}</p>`).join("") 6); 7p.remove(); 8

投稿2018/01/31 13:30

defghi1977

総合スコア4756

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/01/31 14:00

どうもありがとうございます♪ ところで最後に書かれている ); p.remove(); こちらの、 ); この部分のかっこですが、普通はクリックすると赤くなる(かっこを閉じる前のやつと呼応する)のに、なにやら、誰とも呼応してくれない様子なのですけれど、、(◎_◎;) 何かもう一声頂戴できませんでしょうか?
defghi1977

2018/01/31 14:05

p.insertAdjacentHTML( に対応する閉じカッコです. 気持ち悪ければ適当に改行を削除して下さい.
退会済みユーザー

退会済みユーザー

2018/01/31 14:34

なるほど。ありがとうございます。 ところで、どういうわけだかチョット不思議なことがあります。 ご覧のように、なぜか2つ目に適用されない様子なのです↓ https://jsfiddle.net/hfefx9kp/ うむ~(´;ω;`) もうちょっとだけお付き合い頂けませんでしょうか?
defghi1977

2018/01/31 14:37

えー p要素が複数あるのならfor文で繰り返せばいいだけですよ querySelectorAllメソッド等を調べてみて下さい.
退会済みユーザー

退会済みユーザー

2018/01/31 14:58

む、むずかしすぎますよ。。 なにか、うーん、このような書き方でしょうか?? <script> const p = document.querySelector("p");//編集対象のp要素 p.insertAdjacentHTML("afterend", p.innerHTML.split(/<br>/) .filter(val => val != "") .map(val => `<p>${val}</p>`).join("") ); for (const i = 0; i < list.length; i++) { } p.remove(); </script>
defghi1977

2018/01/31 15:09

> む、むずかしすぎますよ。。 プログラミングの練度が低すぎます. まずは, 私の書いたコードで何をしているのかを逐一理解した上で次のコードにどう組み込めばよいか考えて下さい. const ps = document.querySelectorAll("p"); for(let i = 0, len = ps.length; i<len; i++){ const p = ps[i]; }
退会済みユーザー

退会済みユーザー

2018/01/31 17:43

仰るとおりです。この程度のくせにすみませんです。(>_<) やぁ、やっとできました!こういうことですね!? <!-- BRをPに変更 --> <script> const ps = document.querySelectorAll("p"); for(let i = 0, len = ps.length; i<len; i++){ const p = ps[i]; p.insertAdjacentHTML("afterend", p.innerHTML.split(/<br>/) .filter(val => val != "") .map(val => `<p>${val}</p>`).join("") ); p.remove(); } </script> どうもありがとうございます!!
defghi1977

2018/01/31 21:29

少なくとも5ヶ月もの間JavaScriptに携わっているにも関わらず, 基本的なことすら習得できていないところを鑑みるに, あなたの学習方針や態度に問題があると言わざるを得ません. 他人が提示したコードを切り貼りするだけの文字遊びに終始するのではなく, 冷静にコードを読み込むスキルを養うべきでしょう.
退会済みユーザー

退会済みユーザー

2018/01/31 23:42

問題ありありですね。。(;・∀・)ご指導感謝です。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問