要件を満たすだけであれば下記でどうでしょうか。
ロジックとしては、
- #content内のhtmlを取得
- 取得したhtml内で
[hogehoge]
にマッチする文字列を配列に入れる
- その配列をもとにタグの文字列の配列を作成
- 1で取得したhtmlを2と3の配列をもとに新たなhtmlを作成
- 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 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要素でも使えるように、とか汎用的となるとまたひと手間必要です。
私も正規表現はあまり得意でないのでいい回答か微妙ですが、参考になれば幸いです。