Measure String Length in HTML with Javascript/jQUery

Question

I'm trying to run a bit of a custom script to add a style class based on the length of the string in a h4 element. Basically, if the h4 is long enough that it takes up 2 lines, I'll want to adjust the CSS so that the h4 with a two line title also lines up with h4's that have a single line title.

A bit of JQuery returns the all the tags an their content..

jQuery(document).ready(function($){
  $('div.post-content div.title-info h4 a').text(function(){
      console.log(this);
  });
});

This returns..

<a href="http://www.theaterunder30.com/farewell-to-amazing-grace/">Farewell to Amazing Grace</a>
<a href="http://www.theaterunder30.com/details-announced-for-harry-potter-and-the-cursed-child/">Details Announced for “Harry Potter and the Cursed Child”   </a>
<a href="http://www.theaterunder30.com/another-blog-post/">Another Blog Post</a>
<a href="http://www.theaterunder30.com/arrested-development-quotes/">Arrested Development Quotes</a>

Which is great. But only part of the puzzle. I need to be able to count the characters only within the tags and then use something like .length to determine if it's greater than X amount of characters execute {...}

I'm not sure how I can access the text between the tags? in order to run a .length on it. I've had a look at this post but I honestly can't figure out how to apply it to my situation. Any help or guidance would be awesome.

Thanks for looking!

@DrunkWolf Yes, that would have helped. I was confused about how 'this' works and assumed that 'this' how I used it above should output the jQuery Selector with .text() applied. — Andrew-Sepic
– Andrew-Sepic, Commented Nov 19, 2015 at 20:53

Will · Accepted Answer · 2015-11-19 19:26:32Z

6

You want to use jQuery .text() to get the text:

jQuery(document).ready(function($){
  $('div.post-content div.title-info h4 a').each(function(){
      console.log($(this).text().length);
      //Conditional logic based on text length here
  });
});

edited Nov 19, 2015 at 19:26

answered Nov 19, 2015 at 19:22

Will

2,89022 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Erik Philips Over a year ago

This really isn't valid. You shouldn't be calling .text(function()).

artberri Over a year ago

This example is running the .text() function twice which has no sense.

artberri Over a year ago

I deleted my answer and vote for yours just because you edit it, but the real thing is that your answer was not right man ;)

Andrew-Sepic Over a year ago

I see where I've gone wrong! Thanks @DenimChicken, I thought I was calling the .text() function and so was confused when it output HTML as well, not understanding that .text() should have been applied to the console.log() and not the jQuery Selector.

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

I think you're looking for:

$(document).ready(function($){
                                         // V-- each not text!
  $('div.post-content div.title-info h4 a').each(function(){
    console.log($(this).text());
  });
});

Output:

Farewell to Amazing Grace

Details Announced for “Harry Potter and the Cursed Child”

Another Blog Post

Arrested Development Quotes

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 19, 2015 at 19:23

Erik Philips

54.8k11 gold badges133 silver badges158 bronze badges

1 Comment

Andrew-Sepic Over a year ago

Phillips Thanks! Code is solid too!

ak_ · Accepted Answer · 2015-11-19 19:28:13Z

-1

Check the length of the text, then if its longer than what you want (say 20 characters in this example) just add a css class.

$('a').each(function(){
    length = $(this).text().length;
    if(length > 20) {
        $(this).addClass('long');
    }
});

You can see it working on this JS Fiddle: https://jsfiddle.net/9s8evwcx/

edited Nov 19, 2015 at 19:28

answered Nov 19, 2015 at 19:25

ak_

2,8153 gold badges18 silver badges28 bronze badges

8 Comments

Erik Philips Over a year ago

This uses .text(function() in an invalid way.

ak_ Over a year ago

Explain how? You can see its working on the JS Fiddle

artberri Over a year ago

Again using .text function twice, no sense.

Erik Philips Over a year ago

your first method call to .text() makes no sense, it should be .each().

artberri Over a year ago

@AdamKonieska The text function just returns the text, the callback has no sense. Just: length = $('a').text().length

|

Collectives™ on Stack Overflow

Measure String Length in HTML with Javascript/jQUery

3 Answers 3

4 Comments

1 Comment

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related