Regular Expression not matching \n char as expected

Question

Trying to use regex to turn markdown UL into HTML. Below, I've illustrated what an example input could look like, and the result should be two different ul elements, the first having three li elements and the second having two.

- Item 1
- Item 2
- Item 3

A second list:
- Item 1
- Item 2

Running into this infuriating issue where the following regex doesn't seem to be working as intended. The problem is that it doesn't seem to be recognising the \n char, since the first regex /((- |ー).*(\n|$))+/g seems to be only getting matches when there is end of string ($).

.replaceAll(/((- |ー).*(\n|$))+/g, function(match) {
    return `<ul>${match}</ul>`.replaceAll(/(- |ー).*/g, function(match) {
        return `<li>${match.match(/(?<=(- |ー)).*/)}</li>`
    });
});

I don't understand what the problem is, and I tested the expression in Regexr where it works perfectly.

Here is the full context if it would be helpful:

parse(markdown) {
    return markdown

    // Clean HTML brackets
        .replaceAll('<', '&lt')
        .replaceAll('>', '&gt')

    // Change markdown links into html links
        .replaceAll(/\[.*?\]\(.*?\)/g, function (match) {
            return `<a href='${match.match(/(?<=\().*?(?=\))/)[0]}' target='_blank'>${match.match(/(?<=\[).*?(?=\])/)[0]}</a>`;
    })

    // Headings
        .replaceAll(/(^|\n)# .*/g, function (match) {
            return `<h1>${match.match(/(?<=# ).*/)}</h1>`
        })
        .replaceAll(/(^|\n)## .*/g, function (match) {
            return `<h2>${match.match(/(?<=# ).*/)}</h2>`
        })
        .replaceAll(/(^|\n)### .*/g, function (match) {
            return `<h3>${match.match(/(?<=# ).*/)}</h3>`
        })

    // Ordered lists
        .replaceAll(/((- |ー).*($|\n))+/g, function(match) {
            return `<ul>${match}</ul>`.replaceAll(/(- |ー).*/g, function(match) {
                return `<li>${match.match(/(?<=(- |ー)).*/)}</li>`
            });
        });

Note that the \n char is recognised perfectly fine in the // Headings section.

(Edit to clarify that this is in VueJS, hence using this method definition syntax in a component's methods object)

Answer 1

It's not ignoring the \n at all. Your regex pattern is simply matching the entire list as a single match and the \n|$ is simply matching the last one -- i.e. you are getting one long match, not the three separate matches, one for each list item, as you want.

In fact, you were mistaken about "in Regexr where it works perfectly." Go try it there again. You get one long match, not three.

The reason for this is that regexes are by default greedy. You can change that by appending ? to the quantifier to make it lazy instead of greedy:

/((- |ー).*(\n|$))+?/g

Try it with and without the ? in Regexr so that you can see the difference, and also so that you can learn how to interpret Regexr results since you missed this last time.

ℹ️ This doesn't fix your list item conversion to HTML; you have other problems in your code, but I'm answering the question you are asking.

There is another approach you can take the yields the same results:

/((- |ー).*($))+/gm

This approach switches to multiline mode, which means the input is treated as separate lines. In this mode you don't try to mach \n since they don't appear; you just match the end of each line with $.

Answer 2

You are over complexing your code. Try this:

1- Apply all filters other than ordered list

2- Find all list matches

3- Map them to li:

parse(markdown) {
    const cleansedString = markdown

    // Clean HTML brackets
        .replaceAll('<', '&lt')
        .replaceAll('>', '&gt')

    // Change markdown links into html links
        .replaceAll(/\[.*?\]\(.*?\)/g, function (match) {
            return `<a href='${match.match(/(?<=\().*?(?=\))/)[0]}' target='_blank'>${match.match(/(?<=\[).*?(?=\])/)[0]}</a>`;
    })

    // Headings
        .replaceAll(/(^|\n)# .*/g, function (match) {
            return `<h1>${match.match(/(?<=# ).*/)}</h1>`
        })
        .replaceAll(/(^|\n)## .*/g, function (match) {
            return `<h2>${match.match(/(?<=# ).*/)}</h2>`
        })
        .replaceAll(/(^|\n)### .*/g, function (match) {
            return `<h3>${match.match(/(?<=# ).*/)}</h3>`
        });

    const listMatches = Array.from(cleansedString.matchAll(/((- |ー)(.*)($|\n))/g));
    const listHtml = listMatches.map((matches) => `<li>${matches[3]}</li>`);

    return `<ul>${listHtml.join('')}</ul>`;
}