javascript - 如何选择文本 block 每一行的第一个单词？

Question

我正在尝试选择每个第一个单词，将其包装在特定范围内。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis nunc non nisi venenatis auctor. Aliquam consectetur pretium sapien, eget congue purus egestas nec. Maecenas sed purus ut turpis varius dictum. Praesent a nunc ipsum, id mattis odio. Donec rhoncus posuere bibendum. Fusce nulla elit, laoreet non posuere.

如果这是文本，脚本应选择 Lorem、Aliquam、varius 和 nulla。

Answer 1

您可以做到这一点，方法是使用 JavaScript 将段落中的每个单词包装在它自己的范围内，然后遍历这些范围以找出它们在页面上的实际位置，然后应用您的样式更改为 Y 位置大于前一个跨度的跨度。 (不过，最好从头到尾进行，因为前面的包装可能会影响后面的包装。)但这对浏览器来说将是大量工作，您将拥有每次调整窗口大小时都要重复它，因此效果必须物有所值。

类似这样的事情(使用 jQuery，因为您在问题中列出了 jquery 标记):

jQuery(function($) {
  var lasty;
  
  var $target = $('#target');
  $target.html(
    "<span>" +
    $target.text().split(/\s/).join("</span> <span>") +
    "</span>");
  lasty = -1;
  $target.find('span').each(function() {
    var $this = $(this),
        top = $this.position().top;
    if (top > lasty) {
      $this.css("fontWeight", "bold");
      lasty = top;
    }
  });
});

<div id='target' style='width: 20em'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis nunc non nisi venenatis auctor. Aliquam consectetur pretium sapien, eget congue purus egestas nec. Maecenas sed purus ut turpis varius dictum. Praesent a nunc ipsum, id mattis odio. Donec rhoncus posuere bibendum. Fusce nulla elit, laoreet non posuere.</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

自然地，这是在做出大量假设(所有空格都应替换为单个空格，文本中没有标记，可能还有其他标记)。但你明白了。

这是一个处理窗口调整大小的版本，在最后一次调整大小事件发生后 50 毫秒(因此我们不会临时执行)并且根据 Gaby 的建议(如下)我们在调整大小开始时取消加粗:

jQuery(function($) {
  var resizeTriggerHandle = 0;

  // Do it on load
  boldFirstWord('#target');
  
  // Do it 100ms after the end of a resize operation,
  // because it's *expensive*
  $(window).resize(function() {
    if (resizeTriggerHandle != 0) {
      clearTimeout(resizeTriggerHandle);
    }
    unboldFirstWord('#target');
    resizeTriggerHandle = setTimeout(function() {
      resizeTriggerHandle = 0;
      boldFirstWord('#target');
    }, 50);
  });
  
  function boldFirstWord(selector) {
    var lasty;

    // Break into spans if not already done;
    // if already done, remove any previous bold
    var $target = $(selector);
    if (!$target.data('spanned')) {
      $target.html(
        "<span>" +
        $target.text().split(/\s/).join("</span> <span>") +
        "</span>");
      $target.data('spanned', true);
    }
    else {
      unboldFirstWord($target);
    }

    // Apply bold to first span of each new line
    lasty = -1;
    $target.find('span').each(function() {
      var $this = $(this),
          top = $this.position().top;
      if (top > lasty) {
        $this.css("fontWeight", "bold");
        lasty = top;
      }
    });
    $target.data('bolded', true);
  }
  
  function unboldFirstWord(selector) {
    var $target = selector.jquery ? selector : $(selector);
    if ($target.data('spanned') && $target.data('bolded')) {
      $target.find('span').css("fontWeight", "normal");
      $target.data('bolded', false);
    }
  }
});

<div id='target'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis nunc non nisi venenatis auctor. Aliquam consectetur pretium sapien, eget congue purus egestas nec. Maecenas sed purus ut turpis varius dictum. Praesent a nunc ipsum, id mattis odio. Donec rhoncus posuere bibendum. Fusce nulla elit, laoreet non posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis nunc non nisi venenatis auctor. Aliquam consectetur pretium sapien, eget congue purus egestas nec. Maecenas sed purus ut turpis varius dictum. Praesent a nunc ipsum, id mattis odio. Donec rhoncus posuere bibendum. Fusce nulla elit, laoreet non posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis nunc non nisi venenatis auctor. Aliquam consectetur pretium sapien, eget congue purus egestas nec. Maecenas sed purus ut turpis varius dictum. Praesent a nunc ipsum, id mattis odio. Donec rhoncus posuere bibendum. Fusce nulla elit, laoreet non posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis nunc non nisi venenatis auctor. Aliquam consectetur pretium sapien, eget congue purus egestas nec. Maecenas sed purus ut turpis varius dictum. Praesent a nunc ipsum, id mattis odio. Donec rhoncus posuere bibendum. Fusce nulla elit, laoreet non posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis nunc non nisi venenatis auctor. Aliquam consectetur pretium sapien, eget congue purus egestas nec. Maecenas sed purus ut turpis varius dictum. Praesent a nunc ipsum, id mattis odio. Donec rhoncus posuere bibendum. Fusce nulla elit, laoreet non posuere.</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>