选择每一行的第一个单词(CSS / JS / Whatever)

时间:2010-12-21 09:08:18

标签: javascript jquery css

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

  

Lorem ipsum dolor坐着,   奉献精神。信用评级机构   sagittis nunc non nisi venenatis   auctor。 Aliquam consectetur pretium   sapien,eget congue purus egestas nec。   Maecenas sed purus ut turpis varius   格言。 Praesent a nunc ipsum,id   马蒂斯odio。 Donec rhoncus posuere   必比登。劳斯·努尔拉 elit ,laoreet   非posuere。

如果这是文本,脚本应该选择Lorem,Aliquam,varius和elit

提前致谢

3 个答案:

答案 0 :(得分:8)

可以这样做,通过使用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;
    }
  });
});​

Live example

当然,这是一个庞大的假设(所有的空白应该用一个空格替换,文本中没有标记,可能是其他空格)。但是你明白了。

这是一个处理窗口调整大小的版本,在最后一次调整大小事件发生后50ms(所以我们暂时没有这样做)和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);
    }
  }
});​

Live example

答案 1 :(得分:2)

试试这个:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
 $(function() {
  $('p').each(function() {
   var text_splited = $(this).text().split(" ");
   $(this).html("<strong>"+text_splited.shift()+"</strong> "+text_splited.join(" "));
  });
 });
</script>
</head>
<body>
<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>

</body>
</html>

答案 2 :(得分:0)

要在P标签的每个第一个单词加粗,包括初始P之后的空格,请使用一些正则表达式代码:


$('p').each(function(){
    var me = $(this);
    me.html( me.text().replace(/(^\w+|\s+\w+)/,'<strong>$1</strong>') );
  });

干杯 约翰吉斯