Question

我正在尝试在几个段落中选择子字符串 - 方括号中的字符数，并使用类<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中得到正确的子字符串。包裹本身不起作用。我做错了什么愚蠢的小事？或者这是一个愚蠢的大事？

Here是我的小提琴。

Answer 1

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

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

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

Answer 2

替换：

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

jQuery：将<span>包裹在substring ... close，但不完全</span>

2 个答案: