Suppose you have this for your HTML:

<div class="contentBox"> 
    <p>I have some content that is good to read</p>
</div>

However you would like to add a span tag after a certain amount of characters, lets say 26 characters, which would be right after the word "that". The result would look like this:

<div class="contentBox">
    <p>I have some content that<span> is good to read</span></p>
</div>

It has to be after a certain amount of characters, because the paragraph will change from time to time.

Suppose you have this for your HTML:

<div class="contentBox"> 
    <p>I have some content that is good to read</p>
</div>

However you would like to add a span tag after a certain amount of characters, lets say 26 characters, which would be right after the word "that". The result would look like this:

<div class="contentBox">
    <p>I have some content that<span> is good to read</span></p>
</div>

It has to be after a certain amount of characters, because the paragraph will change from time to time.

• javascript
• jquery
• html

• You cannot achieve this safely without looking out for HTML tags. – Oskar Lindberg Commented Oct 15, 2014 at 8:28

4 Answers 4

Set the amount of characters after you want to set the span. Get text of the p element. Substring from start until the amount of chars, add the span, continue with the rest and add the closing span

Try:

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

DEMO

String.prototype.insertTextAtIndices = function (text) {
    return this.replace(/./g, function (char, index) {
        return text[index] ? text[index] + char : char;
    });
};
//usage
var range = {
    25: "<span style='color:red'>",
    40: "</span>"
};

document.getElementsByTagName("p")[0].innerHTML = document.getElementsByTagName("p")[0].innerHTML.insertTextAtIndices(range);

http://jsfiddle/4zx37Lhm/1/

You can make use of JavaScript's substr method.

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 + '<span>' + end + '</span>');
  });
}

addSpan($('.contentBox').find('p'));

span {
  color: #f00;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="contentBox"> 
  <p>I have some content that is good to read</p>
</div>

<div class="contentBox"> 
  <p>I have some content that is good to read and this is a much longer string!</p>
</div>

Try this : get first part and second part of the string using substring() and modify text with span element to put it into html of p tag.

Below function will iterate all p under contentBox div, but if you are targeting only one div then you can use it without .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 + '<span>' + second + '</span>');  
    });
});

DEMO