如何拆分多div并保留格式，为超字符数div添加overMax类

需求回顾 #

• 保留现有逻辑：将文本按空格拆分，每个单词用带灰色背景的.splitDIVtitle类<div>包裹
• 新增规则：设置26字符的长度限制，若字符上限落在单词内部，则在该单词前拆分，所有超出限制的单词对应的<div>添加橙色背景的.overMax类

完整代码实现 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="title-editable" contenteditable="true" data-size="-2">
  Samsung Galaxy S20+5G S Black (345) Smartphone
</div>

CSS #

.splitDIVtitle {
  display: inline-block;
  background: #ccc;
  margin-right: 5px;
}
.overMax {
  background: orange !important;
}

JavaScript #

// 获取目标容器和原始文本
const mainDiv = document.getElementById('title-editable');
const originalText = mainDiv.textContent.trim();

// 按空格拆分单词，过滤空字符串（避免连续空格产生的空项）
const wordList = originalText.split(' ').filter(word => word.trim() !== '');

// 清空容器，重新构建内容
mainDiv.innerHTML = '';

const maxCharLimit = 26;
let currentTotalLength = 0;
let isExceeded = false;

wordList.forEach((word, index) => {
  const wordDiv = document.createElement('div');
  wordDiv.classList.add('splitDIVtitle');
  wordDiv.textContent = word;

  // 计算当前单词加入后的总长度：第一个单词直接加长度，后续单词要加前面的空格（占1字符）
  const lengthToAdd = index === 0 ? word.length : 1 + word.length;

  if (!isExceeded) {
    if (currentTotalLength + lengthToAdd > maxCharLimit) {
      // 当前单词加入会超过限制，标记为overMax，后续所有单词都标记
      isExceeded = true;
      wordDiv.classList.add('overMax');
    } else {
      // 未超过，累加长度
      currentTotalLength += lengthToAdd;
    }
  } else {
    // 已经超过限制，直接添加overMax类
    wordDiv.classList.add('overMax');
  }

  mainDiv.appendChild(wordDiv);
});

代码说明 #

1. 单词拆分与过滤：按空格拆分文本后过滤空字符串，避免连续空格产生无效的空div
2. 长度计算逻辑：
   • 第一个单词直接计算自身长度
   • 后续单词需要额外加1（代表单词间的空格字符）
   • 累计长度超过26时，标记当前及所有后续单词的div为.overMax
3. 安全处理：使用textContent而非innerHTML设置单词内容，避免HTML注入风险

内容的提问来源于stack exchange，提问作者aussiedan