Javascript regex to replace
or
with only text within
tag

Question

So let's say I have an ordered or unordered list that is in string form. I need only to return the text that is contained within each list item of the respective parent element:

<ul>
    <li>Example One</li>
    <li>Example Two</li>
</ul>

I have made this work, but obviously not very efficient:

var first = string.replace(/.*<li>(.*)<\/li>.*/g, '$1');
var second = first.replace(/(<ul>|<ol>|<\/ol>|<\/ul>)/g, '');

Output is what I expect, but I know there is a regex format that will accomplish at once, but I am still pretty green in regards to regex so not sure what I am doing wrong. This is what I thought would work:

var newString = string.replace(/(<ul>|<ol>).*<li>(.*)<\/li>.*(<\/ul>|\/<ol>)/g, '$2');

However, this returns the entire HTML structure as a string:

<ul>
    <li>Example One</li>
    <li>Example Two</li>
</ul>

As always my friends, thank you in advance.

https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags/1732454#1732454 ;) — Thomas, Apr 09 '20 at 07:24
If you're using Javascript, why would you use regex and not a more sensible method like DOM parsing? — CertainPerformance, Apr 09 '20 at 07:26
"ordered or unordered list that is in string form"...string form — Austin737, Apr 09 '20 at 07:26
@CertainPerformance I guess I should have included more context. This is utilizing a javascript templating engine, very much similar to Mustache, so server-side I need to manipulate the string form of the HTML element before it is subsequently rendered client-side. Otherwise I would absolutely love to parse DOM and do what I need :) — Austin737, Apr 09 '20 at 07:29
@CertainPerformance external libraries are not an option for me unfortunately, but I thank you for the recommendation as I love Cheerio — Austin737, Apr 09 '20 at 07:32
Why are external libraries not an option? Are you against them? They need no special inclusion other than your host provides unless they use native machine code libraries. The ones mention in comments only require an include. No headaches. Besides if you want `
@GetSet I am very much for external libraries but I am constrained by the CMS platform that I am building for. Regex is necessary in my scenario as I need to extract the text from within each

Philip Rollins · Accepted Answer · 2020-04-09T08:20:45.793

3

You could split the regex in the pattern /((<ul>|<ol>)|<li>(.*)<\/li>|(<\/ul>|<\/ol>))/g, example below you were pretty close.

const template = `<ul>
    <li>Example One</li>
    <li>Example Two</li>
  </ul>`

const str = template.replace(/((<ul>|<ol>)|<li>(.*)<\/li>|(<\/ul>|<\/ol>))/g, '$3');
console.log(str);

EDIT explanation:

The total pattern ((<ul>|<ol>)|<li>(.*)<\/li>|(<\/ul>|<\/ol>)) minus modifiers becomes the 1st capturing group (will hold anything that is passed up from subgroup).

We are giving 3 alternatives in 1st capturing group (<ul>|<ol>) <li>(.*)<\/li> <\/ul>|<\/ol>

For alternative 1 it must match exactly <ul> or <ol> and it is also capturing group 2.

For alternative 2 it must match <li>(.*)<\/li> of <li> ANYTHING </li>, the .* becomes capture group 3 because it is enclosed in parentheses ().

For alternative 3 it must match exactly </ul> or </ol> and it is also capturing group 4.

So run down:

<ul> matches groups (0: everything, 1: parent, and 2: the <ul>|<ol>) aka [<ul>, <ul>, <ul>]

<li>Example One</li> matches groups (0: everything, 1: parent, 2: no match, and 3: <li>(.*)<\/li>) aka [<li>Example One</li>, <li>Example One</li>, null, Example One]

Homework on the last part :p

edited Apr 09 '20 at 08:20

answered Apr 09 '20 at 07:34

Philip Rollins

1,271
8
19

1

thank you my man, this does indeed work for me :) I guess I am unclear on the usage of capture groups in regex. Maybe if you can expand on your changes? It would be appreciated, but not expected. Thanks again – Austin737 Apr 09 '20 at 07:46
But this answer stills outputs results you dont want. Html before the output you dont want is still in `str`. And after. Accepting wrong answers helps no one. – GetSet Apr 09 '20 at 07:47
@GetSet I need to manipulate a string server-side that will then be rendered in a template as DOM element client-side. The regex that I accepted as answer will be executed server-side before being rendered. I probably should have included more details in my question :) – Austin737 Apr 09 '20 at 07:53
I just wonder if your template already had `
` at end, why do u need regex?
– GetSet Apr 09 '20 at 08:00
1

Edited to include a explanation of the groups in the pattern – Philip Rollins Apr 09 '20 at 08:21
@PhilipRollins thank you again. This has been very helpful – Austin737 Apr 09 '20 at 08:24
@GetSet why not use RegEX? Programming is more of an art, one problem has many solutions and using RegEX doesn't violate any clean code practices. Also there is no HTML in the `str` object not sure what you're looking at all you have to do is click the run snippet button – Philip Rollins Apr 09 '20 at 08:58
This doesn't work if the list HTML is one one line. Like this: `const template = '
- Example One
- Example Two
'`
– volume one Nov 17 '21 at 14:31

Javascript regex to replace
or
with only text within
tag

1 Answers1

Linked

Javascript regex to replace or with only text within tag

1 Answers1

Linked

Javascript regex to replace
or
with only text within
tag