I want to find the mid point of the content and insert a block of HTML codes after the <br> tag or </p> tag so the sentence doesn't get split.

I can find the middle point of the content, but I am not sure how to find the closest <br> tag or </p> tag and insert HTML code.

Here is the code that I have so far. JS Fiddle (/)

jQuery

$(document).ready(function(){
var content = $(".content");

var contentLength = $('.content').text().length;

var midLength = parseInt(contentLength / 2);

midLength.closest("<br>, </p>, <br/>").append("Ad Codes Come Here");

});

I want to find the mid point of the content and insert a block of HTML codes after the <br> tag or </p> tag so the sentence doesn't get split.

I can find the middle point of the content, but I am not sure how to find the closest <br> tag or </p> tag and insert HTML code.

Here is the code that I have so far. JS Fiddle (http://jsfiddle/sunflowersh/BHHFZ/)

jQuery

$(document).ready(function(){
var content = $(".content");

var contentLength = $('.content').text().length;

var midLength = parseInt(contentLength / 2);

midLength.closest("<br>, </p>, <br/>").append("Ad Codes Come Here");

});

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Oct 24, 2013 at 17:09 usernolongerregistered 39011 gold badge44 silver badges1919 bronze badges asked Oct 24, 2013 at 16:59 user2326737user2326737 21111 gold badge55 silver badges1616 bronze badges 1

• 1 closest() is not what you want. It browses DOM tree, trying to find a parent matching a given selector. – Guillaume Poussel Commented Oct 24, 2013 at 17:10

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

I'll assume that you're not the one controlling the content, or it would be p tags instead of them and breaks all mixed up. This will search out p and br inside the content, count them, and place the ad after mid point of their bined length.

var content = $('.content').find('p, br');
var midLength = parseInt(content.length/2);
content.eq(midLength).after("Ad Codes Come Here");

fiddle here: http://jsfiddle/filever10/BHHFZ/20/

Something like this would work if you can modify the source to use <p> tags for each paragraph instead of sometimes using <br>:

content.children().each(function(){
    var $this = $(this);

    contLength += $this.text().length;

    if(contLength >= midLength){
         $this.after("<div class='added'>EXTRA STUFF ADDED HERE</div>");   
         return false;
    }
});

http://jsfiddle/BHHFZ/13/

Substring your content into two parts:

The first one from 0 to middle. The second one from middle to last

Then find the first position of the <br> tag in the second string. If this is enough then you're done.

Else if you want to find the nearest <br> from both sides, then search as well for the position of <br> in the first string but this time the last one and not the first. Compare the distance between 0 and <br> in the second part / and the length of the string with the position of <br> in the first part. The smaller means the closer, then add whatever you want at the position of the br (+it's length if you want to insert your element after it)

if you don't mind breaking your text up into paragraphs, you can do this:

$(document).ready(function(){
    var content = $(".content");
    insertAt = content.children('p') === 0 ? 0 : Math.ceil(content.children('p').length / 2);
    content.children('p').eq(insertAt).before("<p style='color: red'>mid-point</p>");
});

Demo: http://jsfiddle/HHeLw/2/