<div>内の文字列の○文字目以降を削除したい

Question

いつもお世話になっております。

<div>内には文字列が入りますが、<font>タグが含まれる可能性があります。 例：あ<font color="#e51c23">あ</font>あ この時、”あ”という文字が20文字目までは入るようにして21文字目以降の”あ”は削除したいと考えてます。 一応下記のjsで21文字目以降の”あ”は削除できましたが、<font color="#e51c23"></font>のタグがなくなってしまいます。

<div class="contenteditable" contenteditable>ここに文字が入ります</div>

$(document).on( 'blur',"div .contenteditable", function() {
          var text = $(this).text();
          textTrim = text.substring(0,21);
          $(this).html(textTrim);

　　　　　　//var stringOld = $(this).html();
          //for(i=0;i<=stringOld.length;i++){
             // ループで１文字ずつ取得して、21文字めの”あ”に来たらbreakして、$(this).html()で
　　　　　　　 // 上書く方法も思いつきましたが、入力する文字に"<"や”>”があったらどうしようと思いやめました
          //}
      }
  });

なくなってしまう理由は、テキスト文字を取得した際にすでにタグを含んでいないということが原因だと思いますが、実現方法がどうしても思い浮かびません。

実現方法についてお知恵をお借りできたら幸いです。

--追記--
例
テキスト：今日はいい天気ですが、午後からはumbrellaが必要になるでしょう
※”いい”と”は”の文字の色が装飾されています。

入力された文字

<div>今日は<font color="#e51c23">いい</font>天気ですが、午後から<font color="#e51c23">は</font>umbrellaが必要になるでしょう</div>

欲しい文字　(20文字) ⇒　今日はいい天気ですが、午後からはumbr
※装飾されている文字の色をしているfontタグは失いたくないです。

<div>今日は<font color="#e51c23">いい</font>天気ですが、午後から<font color="#e51c23">は</font>umbr</div>

Comments

[kaba]

やりたいことの説明を文面通りに受け止めると、"あいう"が22回繰り返された場合、文字削除処理後は"あいう"を20回繰り返した後、"いう"が2回繰り返される結果になりますが、その認識で正しいですか？

[miguel_2018]

わかりづらく申し訳ありません。例を追記させていただきました。

Answer 1

どうしても面倒な処理になるのでCSSで幅を限定する等で済めばいいのですが、そうでないのならやはりカウントするスクリプトが必要になります。

$(document).on('blur', 'div .contenteditable', function(event) {
  function truncateTextNode(textNode) {
    var text = textNode.nodeValue;
    if (text.length > remain) {
      textNode.nodeValue = text.substring(0, remain);
      remain = -1;
    } else {
      remain -= text.length;
    }
  }

  var remain = 20;
  var root = this;
  var tw = document.createTreeWalker(root);
  var node;
  while (node = tw.nextNode()) {
    switch (node.nodeType) {
      case document.ELEMENT_NODE:
        if (remain < 0) {
          node.setAttribute('data-remove', '1');
        }

        break;
      case document.TEXT_NODE:
        truncateTextNode(node);
        break;
    }
  }

  if (remain < 0) {
    $(root.querySelectorAll('[data-remove]')).remove();
  }
});

cf. https://teratail.com/questions/102493

Comments

[miguel_2018]

いただいたスクリプトで想定していたことが実現できました！
IEですと引数を省略できませんとエラーになってしまいましたが、ちゃんと引数を渡すことで解決できました。
ありがとうございました！

//　追記
function acceptNode(){
return NodeFilter.FILTER_ACCEPT;
}
const safeFilter = acceptNode;
safeFilter.acceptNode = acceptNode;

// 引数を省略しない
var tw = document.createTreeWalker(root,NodeFilter.SHOW_ALL,safeFilter,false);

Answer 2

まず切り分けが必要

• contenteditableは特殊なので、普通のtextareaなどで動作を確認

<script>
$(function(){
  $('#btn').on('click',function(){
    var text = $('#ta').val();
    textTrim = text.substring(0,21);
    $('#ta').val(textTrim);
  });
});
</script>
<textarea id="ta">
あ<font color="#e51c23">あ</font>
</textarea>
<input type="button" id="btn" value="btn">

• 普通のdivで処理

<script>
$(function(){
  $('#btn').on('click',function(){
    var text = $('#d1').html();
    textTrim = text.substring(0,21);
    $('#d1').text(textTrim);
  });
});
</script>
<div id="d1">
あ<font color="#e51c23">あ</font>
</div>
<input type="button" id="btn" value="btn">

• contenteditable処理

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $('#btn').on('click',function(){
    var text = $('#d1').text();
    textTrim = text.substring(0,21);
    $('#d1').text(textTrim);
  });
});
</script>
<div id="d1" contenteditable>ここ書き換える</div>
<input type="button" id="btn" value="btn">

※上記書き換え部分に「<div id="d1" contenteditable>あ</div>」を記載してボタンを押す

命題ではhtmlで戻していますが不整合なデータを戻すならtextでしょう

Comments

[miguel_2018]

切り分けて考える事も必要なのですね、勉強になります！ありがとうございます！