Question

62

Split string at space after certain number of characters in Javascript

rated 0 times [ 66] [ 4] / answers: 1 / hits: 16923 / 6 Years ago, sat, april 14, 2018, 12:00:00

I am attempting to create a tool that takes an input text and splits it into chunks of text at a certain # of characters. However, I need to make sure it does not split the text in the middle of a word.

In my case, I am splitting the string after 155 characters.

I've done quite a lot of searching to try and find a solution, but I fear it may be more complicated than my knowledge of Javascript allows me to figure out. I believe I just need to make some sort of logic that has the splitter backtrack to a space to split if it is in the middle of a word, but I am not sure how to write out such a thing.

Here is my javascript code at the moment:

function splitText() {

    use strict;

    var str = document.getElementById(user_input).value;

    var size = 195;

    var chunks = new Array(Math.ceil(str.length / size)),

        nChunks = chunks.length;



    var newo = 0;

    for (var i = 0, o = 0; i < nChunks; ++i, o = newo) {

          newo += size;

          chunks[i] = str.substr(o, size);

    }



    var newq = 0;

    for (var x = 0, q = 0; x < nChunks; ++x, q = newq) {

        $(#display).append(<textarea readonly> + chunks[x] + </textarea><br/>);

    }

}

And here is my HTML:

<body>

    <content>

        <h1>Text Splitter</h1>

        <form>

            <label>Enter a Message</label>

            <input type=text name=message id=user_input>

        </form>

        <form>

            <input type=button onclick=splitText(); id=submit value=Submit!> <br/>

        </form>

        <label>Your split message: </label>

        <p><span id='display'></span></p>

    </content>

</body>

Here is the code in its current working form, if you'd like to take a look:
https://jsfiddle.net/add4s7rs/7/

Thank you! I appreciate any assistance!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

marisela

Add To Favorites

Follow

Total Points: 103

Total Questions: 105

Total Answers: 102

Location: Solomon Islands

Member since Fri, Oct 8, 2021

3 Years ago

marisela questions

1 Access to XMLHttpRequest at '…' from origin 'localhost:3000' has been blocked by CORS policy

Wed, Aug 25, 21, 00:00, 3 Years ago

1 How to escape double and single quotes in a JSON array

Wed, Oct 21, 20, 00:00, 4 Years ago

1 TypeError: Cannot read property 'contentWindow' of undefined

Sat, Aug 15, 20, 00:00, 4 Years ago

1 Jest import statement: 'TypeError: Cannot set property 'fillStyle' of null'

Sun, Aug 2, 20, 00:00, 4 Years ago

1 Validation using Yup to check number length

Tue, Nov 19, 19, 00:00, 5 Years ago

View All

answered 6 Years ago hollievalerier · Accepted Answer

A short and simple way to split a string into chunks up to a certain length using a regexp:

const chunks = str.match(/.{1,154}(?:s|$)/g);

some examples:

const str = 'the quick brown fox jumps over the lazy dog';



console.log(str.match(/.{1,10}(?:s|$)/g))

console.log(str.match(/.{1,15}(?:s|$)/g))

This works because quantifiers (in this case {1,154}) are by default greedy and will attempt to match as many characters as they can. putting the (s|$) behind the .{1,154} forces the match to terminate on a whitespace character or the end of the string. So .{1,154}(s|$) will match up to 154 characters followed by a whitespace character. The /g modifier then makes it continue to match through the entire string.

To put this in the context of your function:

function splitText() {

    "use strict";

    var str = document.getElementById("user_input").value;

    var chunks = str.match(/.{1,154}(?:s|$)/g);



    chunks.forEach(function (i,x) {

        $("#display").append("<textarea readonly>" + chunks[x] + "</textarea><br/>");

    });

}

Note (as has been pointed out in the comments) that this code will fail if one of the words in the string is longer than the length of the chunks.

Note also that this code will leave a trailing space on the end of the split strings; if you want to avoid that change the last group to a lookahead and insist that the first character not be whitespace:

const str = 'the quick brown fox jumps over the lazy dog';



console.log(str.match(/S.{1,9}(?=s|$)/g))

console.log(str.match(/S.{1,14}(?=s|$)/g))