在一定数量的字符后面的p中添加span标记

假设你的HTML有这个：

 
I have some content that is good to read
  

但是，您希望在一定数量的字符后添加一个span标记，比如26个字符，这些字符就在“that”之后。 结果如下所示：

 
 
I have some content that is good to read
  

它必须在一定数量的字符之后，因为段落会不时变化。

Answer 1

设置span后设置字符数。 获取p元素的文本。 子串从开始到字符数量，添加span ，继续其余并添加结束span

尝试：

 var after=26; var html = $(".contentBox p").html(); html = html.substring(0, after) + "" + html.substring(after)+""; $(".contentBox p").html(html); 

DEMO

Answer 2

 String.prototype.insertTextAtIndices = function (text) { return this.replace(/./g, function (char, index) { return text[index] ? text[index] + char : char; }); }; //usage var range = { 25: "", 40: "" }; document.getElementsByTagName("p")[0].innerHTML = document.getElementsByTagName("p")[0].innerHTML.insertTextAtIndices(range); 

http://jsfiddle.net/4zx37Lhm/1/

Answer 3

您可以使用JavaScript的substr方法 。

 function addSpan($elems) { $elems.each(function() { var $elem = $(this), text = $elem.text(); if (text.length <= 25) return; var start = text.substr(0, 25), // "I have some content that " end = text.substr(25, text.length); // "is good to read" $elem.html(start + '' + end + ''); }); } addSpan($('.contentBox').find('p')); 

 span { color: #f00; } 

  
 
I have some content that is good to read
 
 
 
I have some content that is good to read and this is a much longer string!
  

Answer 4

试试这个：使用substring()获取字符串的第一部分和第二部分，并使用span元素修改文本，将其放入p标签的html中。

下面的函数将遍历contentBox div下的所有p ，但是如果你只针对一个div，那么你可以在不使用.each()情况下使用它

 $(function(){ $('.contentBox p').each(function(){ var text = $(this).text(); var first = text.substring(0,26); var second = text.substring(26,text.length); $(this).html(first + '' + second + ''); }); }); 

DEMO