Question

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

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

提前致谢

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;
    }
  });
});

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

Answer 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>

Answer 3

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


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

干杯约翰吉斯

选择每一行的第一个单词（CSS / JS / Whatever）

3 个答案: