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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

180閲覧

jQueryで、コンテンツ内にある複数の特定の記号内の文字を置換したい

KenjiFukuda

総合スコア9

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/07/04 10:25

前提・実現したいこと

jQuery でコンテンツ(id="content")内にある特定の記号内の文字列を取得して
タグに変換し、取得した文字列をidとして変換したタグに設定したい考えています。

発生している問題・エラーメッセージ

正規表現を利用して、実現できるのかなというイメージはあるのですが、
どのように指定すればよいのかがわかりません。
ご教授の程よろしくお願いします。

該当のソースコード

<div id="content">  リード文  [img01]  リード文  [img02]  リード文  [img03] </div>

といったコードを以下のように置換したいと考えています。

<div id="content">  リード文  <img id="img01">  リード文  <img id="img02">  リード文  <img id="img03"> </div>

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

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

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

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

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

jun68ykt

2018/07/04 14:04 編集

すでに回答を書いておりますが、念のため、要件を確認させてください。<div id="content"> に囲まれたテキストに含まれる、タグ変換対象の記号としては [imgXX] のみでしょうか?それとも、他に [pXX] や [aXX] といったものもあり得て、 これらを <p id="pXX"> や <a id="aXX"> に変換したい、ということでしょうか? ちなみに私の書いた回答は、記号としては、とりあえず [imgXX] のみという認識のものになっています。
KenjiFukuda

2018/07/04 23:55

回答ありがとうございます。pタグやaタグも最初は追加・変換できればと思っていましたが、初期としてはjun68yktさんが想定されたように[imgXX]が実装できればと思っております。
guest

回答2

0

ベストアンサー

こんにちは。

いろいろなやり方がありそうですが、以下一例になります。
(※ <img> を表示上、分かりやすくするため、 dummyimageを使用しています。)

javascript

1$(function() { 2 3 const div = $('#content'); 4 5 const nodes = div.text() 6 .split("\n") 7 .filter(t => t) 8 .map(t => { 9 const m = /[(img.+)]/.exec(t); 10 return (m ? $('<img>').attr( 11 { 12 id: m[1], 13 src: `https://dummyimage.com/100x80/0e1980/fff&text=${m[1]}` 14 }) : t); 15 }); 16 17 div.empty().append(nodes); 18 19});

上記のコードを以下にも上げました。

https://jsfiddle.net/jun68ykt/jnL2pvwc/11/

上記 jsFiddle の FirebugツールからHTMLを見ると、以下

イメージ説明

のように、テキスト内の
[img0n]
が、
<img id="img0**__n__**" />
に変換されていることが確認できると思います。

以上参考になれば幸いです。

投稿2018/07/04 12:51

編集2018/07/04 13:14
jun68ykt

総合スコア9058

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

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

KenjiFukuda

2018/07/05 00:46 編集

こんなにシンプルなソースコードで可能ということにびっくりしました。 .filterや.map、.execにconstなど、今まで知らなかった・使ったことのない関数等を知ることができました。学び多き回答ありがとうございました。 関数等で自分でクリアにして実装してみたいと思います
jun68ykt

2018/07/05 01:22

お役に立てたようで、よかったです!
guest

0

要件を満たすだけであれば下記でどうでしょうか。

ロジックとしては、

  1. #content内のhtmlを取得
  2. 取得したhtml内で[hogehoge]にマッチする文字列を配列に入れる
  3. その配列をもとにタグの文字列の配列を作成
  4. 1で取得したhtmlを2と3の配列をもとに新たなhtmlを作成
  5. 4のhtmlを#contentに差し替え

です。

javascript

1var $content = $('#content'); 2 3$content.each(function() { 4 // 1. html取得 5 var contentHtml = $content.html(); 6 // 最終的なhtml 7 var resultHtml = ''; 8 var reg = /[.*]/g; 9 // 2. 正規表現にマッチした文字列を配列化 10 var arrayMatches = contentHtml.match(reg); 11 12 // 3. imgタグ(文字列)の配列を作成 13 var imageHtmls = []; 14 function replacer(match, p1, p2, p3, offset, string) { 15 return '<' + p1 + ' id="' + p1 + p2 + '" />'; 16 } 17 $(arrayMatches).each(function(index, item) { 18 var elementStr = item.replace(/^[(\D*)(\d*)]$/, replacer); 19 imageHtmls.push(elementStr); 20 }); 21 console.log(imageHtmls); 22 /** 23 * 実行結果 24 * ["<img id="img01" />", "<img id="img02" />", "<img id="img03" />"] 25 */ 26 27 // 4. 取得したhtmlの[img**]の部分を、<img id="img**" /> に置換 28 var tempHtml = contentHtml; 29 for (var i = 0, l = arrayMatches.length; i < l; i++) { 30 tempHtml = tempHtml.replace(arrayMatches[i], imageHtmls[i]); 31 } 32 resultHtml = tempHtml; 33 34 // 5. #content内のhtmlを差し替え 35 $content.html(resultHtml); 36});

確認画面

オンラインエディタで実行結果確認できます↓
https://jsfiddle.net/kde_space/1fh3m9z6/

補足

  • 実際にはimgであれば、src属性、alt属性などが必要になると思いますがその点は大丈夫でしょうか。
  • 今回のjsでは終了タグがいらない要素にしか使えません。p要素でも使えるように、とか汎用的となるとまたひと手間必要です。

私も正規表現はあまり得意でないのでいい回答か微妙ですが、参考になれば幸いです。

投稿2018/07/04 13:29

kde

総合スコア29

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

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

KenjiFukuda

2018/07/05 00:40

回答ありがとうございます。src等はidを付けた後で、個別に設定する予定にいていましたので大丈夫です。 マッチする文字列だけ先に配列に入れてしまうということですね。頭が固くなってますね。そういう発想ができませんでした。まだ学習が必要ですが自分の知っている知識で対応できそうです。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問