I have a div with an ID "shortblogpost". I would like to count up to 27th word then stop and add "..." at the end.
I was trying the following code. Problem, Its counting letters and not words. I think its using jQuery and not strait up JavaScript?
I need to use JavaScript for various server reasons only
<script type="text/javascript">
var limit = 100,
text = $('div.shortblogpost').text().split(/\s+/),
word,
letter_count = 0,
trunc = '',
i = 0;
while (i < text.length && letter_count < limit) {
word = text[i++];
trunc += word+' ';
letter_count = trunc.length-1;
}
trunc = $.trim(trunc)+'...';
console.log(trunc);
</script>
Ty all in advance for any help.
I have a div with an ID "shortblogpost". I would like to count up to 27th word then stop and add "..." at the end.
I was trying the following code. Problem, Its counting letters and not words. I think its using jQuery and not strait up JavaScript?
I need to use JavaScript for various server reasons only
<script type="text/javascript">
var limit = 100,
text = $('div.shortblogpost').text().split(/\s+/),
word,
letter_count = 0,
trunc = '',
i = 0;
while (i < text.length && letter_count < limit) {
word = text[i++];
trunc += word+' ';
letter_count = trunc.length-1;
}
trunc = $.trim(trunc)+'...';
console.log(trunc);
</script>
Ty all in advance for any help.
Share Improve this question asked Feb 10, 2011 at 21:03 webmaster alex lwebmaster alex l 6634 gold badges17 silver badges32 bronze badges 1-
lodash
truncatemay be helpful. doc – tinystone Commented Dec 9, 2023 at 23:34
5 Answers
Reset to default 8Truncate function.
Use: truncate('This is a test of this function', 2); Returns: This is...
Use: truncate('This is a test of this function', 5, '+++'); Returns: This is a test of+++
function truncate (text, limit, append) {
if (typeof text !== 'string')
return '';
if (typeof append == 'undefined')
append = '...';
var parts = text.split(' ');
if (parts.length > limit) {
// loop backward through the string
for (var i = parts.length - 1; i > -1; --i) {
// if i is over limit, drop this word from the array
if (i+1 > limit) {
parts.length = i;
}
}
// add the truncate append text
parts.push(append);
}
// join the array back into a string
return parts.join(' ');
}
Edit: Quick and dirty implement by parameters of OP:
<script type="text/javascript">
// put truncate function here...
var ele = document.getElementById('shortblogpost');
ele.innerHTML = truncate(ele.innerHTML, 20);
</script>
This can be done in one line of code:
myString.replace(/(([^\s]+\s+){27}).+/, "$1...");
Or, you can make it a function:
function truncateString(s, wordCount)
{
var expr = new RegExp("(([^\\s]+\\s+){" + wordCount + "}).+");
return s.replace(expr, "$1...");
}
So, to make this work for your code, you can do:
var post = $('div.shortblogpost').text(); // get the text
post = postText.replace(/(([^\s]+\s+){27}).+/, "$1..."); // truncate the text
$('div.shortblogpost').text(post); // update the post with the truncated text
The loop is appending word by word, while (there are words && the letter count is lower than a limit). The only thing you need to do is replace the second condition with "&& the word count is lower than a limit".
Converting this pseudocode to JS should be trivial...
How about this? jsfiddle
html:
<div id='shortblogpost'>test test test test test test test test test test test</div>
javascript:
alert(document.getElementById('shortblogpost').innerHTML);
var numWordToDisplay = 3; //how many words u want to display in your case 27
var newArray = document.getElementById('shortblogpost').innerHTML.split(' ');
if(newArray.length >= numWordToDisplay )
newArray.length = numWordToDisplay;
console.log(newArray.join(' ') + '...'); //test test test...
This should work:
var words = $('div.shortblogpost').text().replace( /\s/g, ' ' ).split( ' ' );
var result = "";
for( var w = 0 ; w < 27 ; w++ ) {
if( words[w].length > 0 ) {
result += words[w] + ' ';
}
}
result = result.trim() + "...";