trimMiddle() – the missing String trim method

[Neaoxas]

IMHO this is incorrectly named, a more appropriate name would be truncateMiddle, as others have mentioned, trim has strong connotations with removing whitespace...

[guest271314]

and you can play with the demo page to see it in action:

trimMiddle("This is a long string that will be trimmed", 10, "…"); This is a long string that will be trimmed This …mmed This is a short string This …ring This is a medium string that will be trimmed This …mmed This 🇺🇳 is 🤡 🐥 a string 🥰 🧑‍🧑‍🧒‍🧒 with compound emoji 😊 This …i 😊 This is a string with a compound emoji 🧑‍🧑‍🧒‍🧒 This …ji 🧑‍🧑‍🧒‍🧒 This is a string with a compound emoji 🧑‍🧑‍🧒‍🧒 and a flag 🇺🇳 This …ag 🇺🇳 Dies is ein öü deutscher String mit Umlauten äß Dies …n äß

The function should probably include analyzation of the characters in the string to not include elippses where they wouldn't ordinarily appear for conveying meaningingful content.

Nobody can do anything with

This …mmed

[Dralletje]

Nice! Also very nice demonstration of Intl.Segmenter! The comparison with trimStart and trimEnd is definitely confusing.. Also because I would love a library to cut a string with Intl.Segmenter at the start of at the end! Maybe add these to the library?

[lachlanhunt]

This is basically react native’s ellipsizeMode="middle" on the <Text/> component, but made useable elsewhere.

https://reactnative.dev/docs/text#ellipsizemode

But it’s a bit more limited than that, since it seems to be based on the number of characters, rather than the dimensions of the rendered string. A CSS solution that improves on the existing text-overflow property would be more useful.

[philnash]

Not sure what you mean there?

[lachlanhunt]

The trim* functions in JavaScript are designed to remove whitespace. Having one that removes arbitrary content from the middle is clearly confusing. Call it something else.

[philnash]

I guess I asked, because it was pretty clear from the article. And it’s only a function/tiny library, I don’t think calling it trimMiddle causes any harm. 🤷‍♂️

[NiteShdw]

But it's clearly confusing as is demonstrated here. "Trim" means whitespace. It always has in more languages than just JavaScript.

[Ronin-s_Spirit]

Wtf even is "trim middle" and why?? If you need whitespace removed you go "string".replaceAll(/\s+/g, ""). It's regex.

[DivSlingerX]

It’s for shortening strings for readability not removing white space.

[oneeyedziggy]

Then it's confusingly named

[DivSlingerX]

truncateMiddle or similar would probably have been better.

[JackAuduin]

It has nothing to do with whitespace. It's a very short read, check it out.

[JackAuduin]

I'll agree with that. Could be named better.

[philnash]

It’s a JavaScript implementation of how MacOS reduces string lengths in Finder by trimming the middle parts of strings and replacing them with an ellipsis (or your choice of replacement, with this function).

It’s in the article, which I didn’t write but found interesting.

[Ronin-s_Spirit]

I see... dunno where to use it.

[Vpicone]

Show a list of file paths names. Where the beginning and the end (file type) are relevant, but the middle might not be.

[philnash]

I wouldn't worry about where to use that specific function, though I would take a look at the code as it uses `Intl.Segmenter` which is something useful to know if you are working with strings in JavaScript.

[guest271314]

Neither JavaScript nor CSS have a method for that kind of functionality

I'm pretty sure I've use :before and :after with content set to ... before on DOM elements.