3

我正在尝试在几个段落中选择子字符串（方括号中的字符数），并将它们中的每一个都包装在<span>带有类 , 的标签中char_count。这是其中一个的 HTML 和 CSS：

var select_p = $('div#promo_area div.featured_box p');
select_p.each(function() {
  var first_index = $(this).html().indexOf('[');
  var last_index = $(this).html().indexOf(']') + 1;
  var selected_text = $(this).html().substring(first_index, last_index);
  selected_text.wrap('<span class="char_count" />');
});
span.char_count {
  padding-top: 0;
  color: #ff6600 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="promo_area">
  <h3>Featured Stories</h3>
  <div class="featured_box">
    <h4><a href="/give">Senectus et Netus</a></h4>
    <div>
      <a href="/give"><img width="207" height="139" src="http://myrussreid.com/files/2011/06/ffffff1395-207x139.jpg" class="attachment-wds_home_image wp-post-image" alt="ffffff139" title="ffffff139" /></a>
    </div>
    <p>Pellentesque habitant morbi tristique senectus et netus. [100 characters w/spaces]</p>
    <a href="/give">Please Give</a>
  </div>
  <!-- end .featured_box -->
</div>

它似乎一直有效.wrap——我在selected_text. 包装本身不起作用。我做错了什么愚蠢的小事？还是这是一件愚蠢的大事？

这是我的小提琴。

4

2 回答 2

2

surroundContents如果您喜欢冒险，您可以尝试使用范围实现解决方案，或者您可以使用此插件使其变得简单：

$(this).highlight(selected_text, { element: 'span', className: 'char_count' });

这是一个工作小提琴：http: //jsfiddle.net/Kpn7b/2/

于 2012-11-01T20:09:13.863 回答
1

代替：

var selected_text = $(this).html().substring(first_index, last_index);

和：

var selected_text = $('<span class="char_count">').text($(this).html().substring(first_index, last_index));

你 selected_text是一个字符串，我的是一个 jQuery span 对象。

如果你愿意，你可以使用类似这样的脚本：

select_p.html(function(i, old) {
    return  old.replace(/(\[.*\])/gi, '<span class="char_count">$1</span>');
});
于 2012-11-01T19:57:52.980 回答