JavaScript use map for divide a array of strings base on character like '\n'

Question

I was using a map to trying to clean data send to an API that has sentence parser the problem it really breaks when finding a \n or \t so chose to replace for a time:

const allBulletPoints = Array.from(document.querySelectorAll('ul,ol'));
const allBulletPointsText = allBulletPoints.map((element) =>
    element.textContent
        .split(/(\t)|(\n)/g)
        .filter((element) => element && !element.match(/(\t)|(\n)/gi))
);

console.log(allBulletPointsText);
/*
Result:
[   
    [
        "        Lorem ipsum dolor sit amet consectetur, adipisicing elit", 
        "        Lorem ipsum dolor sit amet consectetur, adipisicing elit", 
        "        Lorem ipsum dolor sit amet consectetur, adipisicing elit", 
        "    "
    ],
    [
        "        Lorem ipsum dolor sit amet consectetur, adipisicing elit", 
        "        Lorem ipsum dolor sit amet consectetur, adipisicing elit", 
        "        Lorem ipsum dolor sit amet consectetur, adipisicing elit", 
        "    "
    ]
]

I need to be like this:
[
    "Lorem ipsum dolor sit amet consectetur, adipisicing elit", 
    "Lorem ipsum dolor sit amet consectetur, adipisicing elit", 
    "Lorem ipsum dolor sit amet consectetur, adipisicing elit", 
    "Lorem ipsum dolor sit amet consectetur, adipisicing elit", 
    "Lorem ipsum dolor sit amet consectetur, adipisicing elit", 
    "Lorem ipsum dolor sit amet consectetur, adipisicing elit", 
]
*/

<ul>
    <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit</li>
    <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit</li>
    <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit</li>
</ul>
<ol>
    <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit</li>
    <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit</li>
    <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit</li>
</ol>

But right now I want to make to do a little more clean using substr or the split and add all elements seperated then and add to the same array.

Any idea how to get better solution using this functions?

Click edit, then `[<>]` stack snippet editor and post a [mcve] with relevant HTML plus expected output — mplungjan, Oct 07 '20 at 18:27

score 0 · Answer 1 · answered Oct 07 '20 at 19:13

0

Like already mentioned in comments you could trim strings in your first, before doing split.

element.innerText
       .trim()
       .split(/(\t)|(\n)/g)
       .filter((element) => element && !element.match(/(\t)|(\n)/gi))

answered Oct 07 '20 at 19:13

Andrew Ymaz

1,863
8
12

I understand but how concatenate the arrays? – Rogério Ferreira de Melo Oct 07 '20 at 19:16
@RogérioFerreiradeMelo you could iterate again and use Array.prototype.contact https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat or even do something like this var a = ['hello']; var b = ['world']; console.log(a + b); // helloworld – Andrew Ymaz Oct 08 '20 at 20:19
1

Okay, I gonna do that – Rogério Ferreira de Melo Oct 08 '20 at 20:49
another great solution published here https://stackoverflow.com/a/15397506/8539736 – Andrew Ymaz Oct 09 '20 at 14:10

Robert · Answer 2 · 2020-10-14T00:46:42.397

The element.match(/(\t)|(\n)/gi) doesn't do anything since split already removed all \t and \n.
Instead of trimming each line separately, you could build it into the splitting like split(/\s*?[\t\n]\s*/g). Or just use match instead to just match what you're interested in.
Concatenating the arrays can be done with Array#flat().

So this might be what you're looking for:

const allBulletPointsText = Array.from(
       document.querySelectorAll('ul,ol'),
       e => e.textContent.match(/\S[^\t\n]*\S|\S/g) || []
// or: e => e.textContent.trim().split(/\s*?[\t\n]\s*/g).filter(e => e)
// or: e => e.textContent.split(/^\s+|\s*?[\t\n]\s*|\s+$/g).filter(e => e)
// or: e => e.textContent.split(/[\t\n]+/g).map(e => e.trim()).filter(e => e)
).flat();

Thanks, I never heard about the flat method. – Rogério Ferreira de Melo Oct 13 '20 at 18:30 — Rogério Ferreira de Melo, Oct 13 '20 at 18:30

JavaScript use map for divide a array of strings base on character like '\n'

2 Answers2