如何使JS函数对每个div生效？实现每个div最后可见单词替换为span

AI 小北

2026-5-14

嗨，我来帮你解决这个问题～你的代码目前只处理第一个div，还会干扰其他div的原因是没有单独遍历每个div进行处理，而且全局替换HTML的方式会把所有匹配到的单词都换掉，自然就乱了。

咱们可以改成逐个处理每个div，这样每个元素都能独立计算自己的最后一个可见单词：

修正后的代码

$('div').each(function() {
  var $div = $(this);
  // 记录当前div的原始尺寸
  var originalSize = [$div.width(), $div.height()];
  // 把文本拆分成单词数组
  var words = $.trim($div.text()).split(/\s+/);
  var targetWord = '';

  // 循环尝试去掉最后一个单词，直到内容尺寸不超过原始尺寸
  while (words.length > 0) {
    // 创建克隆元素来测试当前单词组合的尺寸
    var $clone = $div.clone().text(words.join(' ')).insertAfter($div);
    // 把克隆元素的内容包成span，方便计算尺寸
    $clone.contents().wrap('<span />');
    var $span = $clone.find('span');
    
    if ($span.width() <= originalSize[0] && $span.height() <= originalSize[1]) {
      // 如果当前组合的尺寸符合，那刚才去掉的就是最后一个可见单词
      targetWord = words.pop();
      $clone.remove();
      break;
    } else {
      // 尺寸超了，继续去掉最后一个单词
      words.pop();
      $clone.remove();
    }
  }

  // 替换当前div里的目标单词为带样式的span
  if (targetWord) {
    var newHtml = $div.html().replace(new RegExp('\\b' + targetWord + '\\b'), '<span class="red">' + targetWord + '</span>');
    $div.html(newHtml);
  }
});