Search code examples
javascriptlodash

lodash - truncate function returns wrong result

Lodash _.truncate function returns a wrong result with the following snippet where a long HTML string is used in the omission parameter.

I wonder if there is something I am not doing correctly or if the problem lays in the library itself.

var string = "In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced."
    
var omission = '<span data-toggle="popover" data-placement="top" data-trigger="hover" data-html="true" data-content="In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.">&nbsp<a href="javascript:void(0)">[...]</a></span>'
    
var truncated = _.truncate(string, {length: 150, separator: /,? +/, omission: omission});

console.log(truncated)
    
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>

Output contains only the omission variable, not the first 150 chars of the string

Expected output:

'In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on<span data-toggle="popover" data-placement="top" data-trigger="hover" data-html="true" data-content="In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.">&nbsp<a href="javascript:void(0)">[...]</a></span>'
Solution

  • First rule keep it simple.

    You are trying to get one thing (the omission indicator) to do two things.

    1. Indicate an omission
    2. Be a clickable element

    To make it simpler hide the omission indicator first of all and then add the clickable element if str.length is over 150 characters.

    var stringLimit = 150;

var str = "In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced."

var popoverToggle = '';
if (str.length > stringLimit) {
  popoverToggle = '<span data-toggle="popover" data-placement="top" data-trigger="hover" data-html="true" data-content="'+ str +'">&nbsp<a href="javascript:void(0)">[...]</a></span>';
}

var truncated = _.truncate(str, {length: stringLimit, separator: /,? +/, omission: ''});

console.log(truncated + popoverToggle);
document.write(truncated + popoverToggle);

    See my Codepen