特定要素内のタグで括られていない文字列をタグで括りたい

htmlは編集できず表示時JS(jquery)で整形する特殊な状況でのご質問です。

下記の様なhoge要素内にタグで括られていない文字列が点在しています。

変更前ソース

lang
1<div class="hoge">
2半角全角混合文字列14文字
3<p>…</p>文字列<span>…</span>文字列文字列文字列
4</div>

その中の冒頭の半角全角混合の文字列14文字をdivで括りたいです。

変更後ソース

lang
1<div class="hoge">
2<div>半角全角混合文字列14文字</div>
3<p>…</p><span>…</span>
4</div>

そのような処理は可能でしょうか？
ご教授のほどよろしくお願いいたします。

coco_bauer

2015/09/15 02:00

divで括る文字列は、hoge要素の「最初の１４文字」と決まっているのでしょうか？それとも、題名にあるように、hoge要素の「タグで括られていない最初の文字列」なのでしょうか。どちらの処理も可能ですが、当然ながらそれぞれのプログラムは相当違ったものになります。

castail

2015/09/15 02:05

coco_bauer様ご回答ありがとうございます。＞hoge要素の「タグで括られていない最初の文字列」こちらでの方法をご教授頂ければと思います。

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

回答3件

ベストアンサー

１個目のテキストノードだけ div で囲って、２個目以降は削除するということでしょうか？

contents() でテキストノードも含めた全要素が取れるので、nodeType でテキストノードを判断して処理するといかがでしょうか。

javascript
1$(function(){
2    var first = true;
3    $(".hoge").contents().each(function() {
4        if (this.nodeType == 3) {
5            if (first) {
6                $(this).wrap('<div>');
7                first = false;
8            } else {
9                $(this).remove();
10            }
11        }
12    });
13})

投稿2015/09/15 02:11

ngyuki

総合スコア4514

castail

2015/09/15 02:16

ngyuki様ご回答ありがとうございます。上記内容ですと、下記の様にhoge直下に空のdivが生成されてしまいました。 = <div class="hoge"><div> </div><div>半角全角混合文字列14文字</div><p>…</p><span>…</span></div>

castail

2015/09/15 02:30

ngyuki様以下、MineoOkuda様からのご回答で、こちらは正常に動作されていたとのことでございました。大変失礼いたしました。この度はご回答ありがとうございました。

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

テキストノード操作は jQuery の不得手(というよりほとんどない)とするAPIなので DOM API を使用した方が良いと思います。

JavaScript
1jQuery('.hoge').each(function (i, element) {
2  var div = element.ownerDocument.createElement('div'),
3      textNode = element.firstChild;
4
5  div.appendChild(textNode.cloneNode(false));
6  element.replaceChild(div, textNode);
7});

jsfiddleにサンプルをUPしました。

投稿2015/09/15 02:46

think49

総合スコア18170

castail

2015/09/15 03:25 編集

think49様ご回答ありがとうございます。こちら正常に動作いたしました！誠にありがとうございます。ただ、ベストアンサーは先にご回答頂いたngyuki様とさせて頂きます。何卒ご容赦下さい。

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

こうですかね？

<head>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
    $(function(){
        var str = $('.hoge').html();
        str = '<div>' + str;
        str = str.replace(/<p>/,'</div><p>');
        $('.hoge').html(str);
    })
    </script>
</head>

投稿2015/09/15 02:08