0
<section>あいう<b>えおかきく</b>けこさしすせそ</section>

このようなHTMLがあったとき、5文字ずつに区切りたいとします。
結果として、section タグ内のHTMLを

<div>あいう<b>えお</b></div><div><b>かきく</b>けこ<div>さしすせそ</div>

のようにもともと囲まれている b タグは維持しつつ、div タグで囲む方法はありますか?
よろしくお願いします。

1

1 件の回答 1

0

b タグは維持しつつ、div タグで囲む方法はありますか?

あります。数行程度の短いコードで書けるような簡単な方法はないかと思います。

どこがb内か調べて、その結果を元にDOMを再構築するのが簡単でしょう。前提条件でコードは変わりますが、

  • 1文字はJavaScriptの1文字とみなす(絵文字などサロゲートペアやNFDは考えない)
  • section 要素の直下には b 要素とテキスト以外は入らない
  • b 要素の直下にはテキストしか入らない

以上のようなシンプルなケースでは、次のようになります。

function getBoldFlags(section) {
  var flags = [];
  var offset = 0;
  for (var child = section.firstChild; child; child = child.nextSibling) {
    if (child.nodeType == Node.TEXT_NODE || child.nodeType == Node.CDATA_SECTION_NODE) {
      for (var i = 0; i < child.length; ++i)
        flags.push(false);
    } else if (child.nodeType == Node.ELEMENT_NODE) {
      if (child.tagName == 'B') {
        for (var i = 0; i < child.textContent.length; ++i)
          flags.push(true);
      } else {
        for (var i = 0; i < child.textContent.length; ++i)
          flags.push(true);
      }
    }
  }
  return flags;
}

function foldWithin(text, flags, width) {
  console.assert(text.length == flags.length, 'getBoldFlags() has a bug?');
  var fragment = document.createDocumentFragment();
  for (var i = 0; i < text.length; i += width) {
    var div = document.createElement('div');
    var end = Math.min(text.length, i + width);
    for (var j = i; j < end;) {
      if (flags[j]) {
        var chunkEnd = j
        for (; chunkEnd < end; ++chunkEnd) {
          if (!flags[chunkEnd])
            break;
        }
        div.appendChild(document.createElement('b')).textContent = text.substring(j, chunkEnd);
        j = chunkEnd;
      } else {
        var chunkEnd = j
        for (; chunkEnd < end; ++chunkEnd) {
          if (flags[chunkEnd])
            break;
        }
        div.appendChild(document.createTextNode(text.substring(j, chunkEnd)));
        j = chunkEnd;
      }
    }
    fragment.appendChild(div);
  }
  return fragment;
}

var section = document.querySelector('section');
var boldFlags = getBoldFlags(section);
var fragment = foldWithin(section.textContent, boldFlags, 5);
section.textContent = '';
section.appendChild(fragment);
b {
  color: red;
}
<section>あいうえ<b>おかきく</b>けこ<b>さしすせそ</b>た<b>ち</b>つて<b>となにぬねのは</b>ひふへほま</section>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。