How can I select the first word of every line of a block of text?

Question

I'm trying to select each first word, to wrap it in a specific span.

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.

If this is the text, the script should select Lorem, Aliquam, varius and nulla.

Answer 1

You can do this, by using JavaScript to wrap every word in the paragraph in its own span, and then walking through the spans finding out what their actual position on the page is, and then applying your style changes to the spans whose Y position is greater than the preceding span. (Best do it beginning-to-end, though, as earlier ones may well affect the wrapping of latter ones.) But it's going to be a lot of work for the browser, and you'll have to repeat it each time the window is resized, so the effect will have to be worth the cost.

Something like this (used jQuery as you've listed the jquery tag on your question):

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>

Naturally that's making a huge set of assumptions (that all whitespace should be replaced with a single space, that there's no markup in the text, probably others). But you get the idea.

Here's a version that handles window resize, 50ms after the last resize event occurs (so we're not doing it interim) and with Gaby's suggestion (below) that we unbold at the start of the resize:

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>

Answer 2

Try this:

$(function() {
  $('p').each(function() {
    var text_splited = $(this).text().split(" ");
    $(this).html("<strong>"+text_splited.shift()+"</strong> "+text_splited.join(" "));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

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