I’ve developed three little functions to help me with text elements.
I’ve run into the need to style single lines of text in place of a whole block text to obtain an effect like this one [caption id=“attachment_983” align=“aligncenter” width=“1024”]
Styling lines[/caption] While that might be done in PHP before any actual echo to the page I need it done in JavaScript and put together the lineSpliceByWords, lineSpliceByChars and the atMostChars functions to solve my problem.
The code is contained in my library; there are no requirements but JavaScript so copying and pasting is a possibility.
Being defined on String.prototype the functions can be used like
var someString = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum";
// split each 10 words, wrap each line into a div with the `some-line` class
var byWords = someString.lineSpliceByWords( 10, 'div', 'some-line' );
// split in lines of 100 chars each at most, wrap each line into a div with the `some-line` class
var byChars = someString.lineSpliceByChars( 100, 'div', 'some-line' );
// reduce string to at most 50 chars
// will output 'Lorem ipsum dolor sit amet, consectetur…'
var reduced = someString.atMostChars(50);
While the functions are born out of some testing and the one I made on the project those might yield some bugs I will fix along the way.