-1

I'm trying to retrieve the length of a div and cut it off once it reaches the the last full word before 250 characters. I also need to add "...". I've seen several posts related to this but nothing seems to be working for me. I haven't gotten any errors in the console so I know my function isn't right. 

function short(length) {
    var s = document.getElementsByTagName('.message'),
        len = s.length;

    for (var i = 0; i < len; i++) {
        var g = s[i].innerHTML,
            x = '...',
            leng = length- 3,
            html = g.substring(0, leng) + "",
            allHTML = html + x;

        s[i].innerHTML = allHTML;
    }
}

short(250);
Ben Thomas
  • 3,084
  • 2
  • 18
  • 38
London804
  • 905
  • 1
  • 17
  • 37
  • You should first format your code, second make sure it passes jshint, then debug it by placing breakpoints at important lines, like where you're calling `getElementsByTagName` and examine the result. –  Jun 24 '15 at 17:08

3 Answers3

1

Replace this:

document.getElementsByTagName('.message')

With this:

document.querySelector('.message')

getElementsByTagName allows you to select elements but not those elements with classes. For eg. <div>, <p> can be selected by getElementsByTagName but not <div class="message"> (.message). To select by class name you may use getElementsByClassName() instead.

For your interest, querySelector allows you to select any types of elements such as simple element, elements with classes, elements with id, and more.

Bhojendra Rauniyar
  • 78,842
  • 31
  • 152
  • 211
0

Here, I made you a better easier to read script, reusable :). Simply pass in the nodes that you would like to filter

var restrictWordCount = function (targ, maxWordsInt){
  "use strict";
  var words = targ.html().split(' ');
  var wordCount = words.length;
  var curCount = 0;
  targ.html('');
  words.forEach(function(word){
    curCount = curCount + 1;
    if (curCount < wordCount){
      targ.append(word+' ');
    }
    else {
      targ.append('...');
    }
  });
};
// Call it into action like so, pass each node you wish to have filtered as the first arg

restrictWordCount($('button'), 4);

Here is the proof that it works: http://codepen.io/nicholasabrams/pen/eNerzm

AlphaG33k
  • 1,529
  • 1
  • 11
  • 21
  • What is that `.html` method or the `$`? How would this work with languages like Japanese and Korean that have no spaces? –  Jun 24 '15 at 17:27
  • It wouldn't work this way, however this could easily be modified to count all characters and then do the same thing. Then you would pass this in as a char count instead of word count, I can provide an update. This method would work for any instance. Also the $ is shorthand for window.jQuery – AlphaG33k Jun 24 '15 at 17:38
  • It's generally considered better not to provide a jQuery solution unless the OP asked for it, or included it in the tags. jQuery is gradually losing relevance and it is no longer reasonable to take it for granted. There are perfectly good standards-based alternatives for nearly everything jQuery can do. –  Jun 24 '15 at 17:45
  • Ok this makes sense I will use native Javascript examples where relevant – AlphaG33k Jun 24 '15 at 17:48
0

The thing is, you don't need to do any of this. You can simply use the text-overflow: ellipsis CSS property.

You'll find that your solution, in addition to being too much unnecessary code, actually doesn't work well. Where to truncate the string depends on the size of the container, the font family, and the font size. Your hard-wired logic to truncate the string to some fixed length will result in strings which are either too short, or too long. The CSS approach handles all this for you with no ado.

If you want to truncate a multi-line string to fit in some pre-determined height, things are a bit more complicated. But SO to the rescue. See Insert ellipsis after specific number of lines. This is not word-sensitive, but could be made so without too much trouble.

Community
  • 1
  • 1