ラジオボタン直後の文字列をlabelで括りたい

ラジオボタン直後の文字列をlabelタグで括りたいです。

具体的には、jqueryで動的に以下のように修正したいです。

[修正前]

lang
1<div class="hoge">
2    <input name="name1" type="radio">ラジオ1
3    <input name="name1" type="radio">ラジオ2
4    <input name="name1" type="radio">ラジオ3
5    <p>・・・・</p>
6    <div>・・・・・・・・</div>
7    <input name="name2" type="radio">ラジオ1
8    <input name="name2" type="radio">ラジオ2
9    <input name="name2" type="radio">ラジオ3
10</div>

[修正後]

lang
1<div class="hoge">
2    <label><input name="name1" type="radio">ラジオ1</label>
3    <label><input name="name1" type="radio">ラジオ2</label>
4    <label><input name="name1" type="radio">ラジオ3</label>
5    <p>・・・・</p>
6    <div>・・・・・・・・</div>
7    <label><input name="name2" type="radio">ラジオ1</label>
8    <label><input name="name2" type="radio">ラジオ2</label>
9    <label><input name="name2" type="radio">ラジオ3</label>
10</div>

ご教授の程よろしくお願いいたします。

行動規範の内容に同意します

回答2件

・対象範囲内は１タグ１行の記述構成になっていて最後が改行されている
という前提で［修正後］のイメージとなるよう力技でやってみました

javascript
1function addLabelTag()
2{
3  var str = $(".hoge").html(); // htmlを取り出す
4  var strElms = str.split("\n"); // 改行で分割
5  str = "";
6  for( i=0; i<strElms.length; i++ ){
7    if( strElms[i].indexOf("input") != -1 ){  // input タグを対象に
8      strElms[i] = strElms[i].replace(/^\s+/g, ""); // inputタグの前の余白をカット
9      strElms[i] = "<label>" + strElms[i] + "</label>"; // 前後に label タグを付加
10    }
11    str += strElms[i] + "\n"; // 末尾に改行を付加して全体htmlに結合
12  }
13  $(".hoge").html(str); // htmlを戻す
14
15  alert( $(".hoge").html() ) // 確認
16}

できないことはない、ということで、、、

投稿2015/10/07 01:36

takito

総合スコア3111

castail

2015/10/07 08:43

せっかく検証頂いたのに誠に恐縮ですが、先にご回答頂いた「NIA」様をベストアンサーに選ばせていただきました。こちらの内容も参考にさせて頂きます。この度はご回答ありがとうございました。

行動規範の内容に同意します

ベストアンサー

ラベルをクリックで反応させるということでしょうか？

HTML
1 <label for="r1" ><input name="name1" type="radio" id="r1">ラジオ1</label>
2 <label for="r2" ><input name="name2" type="radio" id="r2">ラジオ2</label>

対応が出来るようになりますが、質問内容を誤解していたらすいません。

=====================================================
スーパー簡易的で質問内容のパターンしか成功してないので、
テストは必要ですが、下記が参考になればと思います。

HTML
1<!DOCTYPE>
2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
3<head>
4<title>JS正規表現</title>
5<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
6<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
7<script type='text/javascript'>
8;$(function()
9{
10  var hogehtml = $(".hoge").html();
11  $(".hoge").html(hogehtml.replace(/<input(.*)type="radio"(.*)>(.*)/gm,'<label><input$1type="radio"$2>$3</label>'));
12
13});
14</script>
15</head>
16<body>
17
18<div class="hoge">
19  <input name="name1" type="radio">ラジオ1
20  <input name="name1" type="radio">ラジオ2
21  <input name="name1" type="radio">ラジオ3
22  <p>・・・・</p>
23  <div>・・・・・・・・</div>
24  <input name="name2" type="radio">ラジオ1
25  <input name="name2" type="radio">ラジオ2
26  <input name="name2" type="radio">ラジオ3
27</div>
28
29</body>
30</html>