Top community members
All Wiki Articles Create Wiki Article

Have you ever heard about encyclopedia for code?

What about: Wiki for Code project?

* because I've tried to share code and my solutions on different services and it was removed or I was unwelcomed
   - maybe it wasn't good place, but this one is.

if you think you have solution that can help someone, you are welcome to share this solution - Click here

JavaScript - simple way how to write own function to make beauty string shortcuts

0 contributions
2 points

In this article, we're going to have a look at how to wite in JavaScript own function that creates shortcut for string.

There are available styles to achieve same effect, but sometimes we are not able to do it with styles and we need to have shortcut string e.gĀ canvas string drawing or title / alt attribute.

This approach solves somehow problem of multiline text with ... at the end if we don't want to display all text because css solutions are not enough at this moment (we have 2020).

1. Custom method example

Presented solution in this section tries to find closes white character to cut string in pretty way - to do not split worlds. Only when it is impossible to find white character, function cuts worlds.

// ONLINE-RUNNER:browser;

var Utils = new function() {
    var expression = /\s[^\s]*$/;

    this.createShortcut = function(text, limit) {
        if (text.length > limit) {
            var part = text.slice(0, limit - 3);
            if (part.match(expression)) {
                return part.replace(expression, '...');
            }
            return part + '...';
        }
        return text;
    };
};

// Usage example:

// number:           |10   |16           |30
//                   v     v             v
var text = 'This is example very long text that should be cut.';
// cutting:     |  |                 |

console.log(Utils.createShortcut(text,  10)); // This...
console.log(Utils.createShortcut(text,  16)); // This is...
console.log(Utils.createShortcut(text,  30)); // This is example very long...
console.log(Utils.createShortcut(text, 250)); // This is example very long text that should be cut.

// number:           |10   |16           |30
//                   v     v             v
var text = 'This_is_example_very_long_text_that_should_be_cut.';
// cutting:        |     |             |

console.log(Utils.createShortcut(text,  10)); // This_is...
console.log(Utils.createShortcut(text,  16)); // This_is_examp...
console.log(Utils.createShortcut(text,  30)); // This_is_example_very_long_t...
console.log(Utils.createShortcut(text, 250)); // This is example very long text that should be cut.

Ā 

0 contributions

Suggested wiki articles:

Suggested findings

Let's do the work and have some fun
  • Dirask is online IT community for professionals and hobbyist to share their knowledge and help each other in extraordinary easy way. ā¤ šŸ’» šŸ™‚
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    we will help you. šŸ‘ āœ” šŸ¦„
Read more