Match text after colon and before new line - Javascript

Question

I have a text in the following format:

Concept number 1: my content here1<br>
Concept number 2: my content here2<br>
Concept number 3: my content here3<br>

I want a regext to get the text after Concept number 1:. So I want to get the following: my content here1.

I was using Concept number 1(.*?)<br>, but I'm getting the whole string as a result instead of the text after the colon.

Demo online.

var text = $('.text').html();
var regex = new RegExp('Concept number 1:(.*?)<br>', "g");
var matches = text.match(regex);
//matches contains `Concept number 1: my content here1<br>`

So you are matching "Name and Surname:" although in the text to match it reads "Concept number *:" and you are wondering why it doesn't match? — Constantin Groß, Nov 01 '17 at 15:56
"*I'm getting the whole string as a result*" No, you're not. — melpomene, Nov 01 '17 at 15:57
@melpomene am I not? Have you checked the ´matches` content? It's an array with 1 dimension containing `Concept number 1: my content here1
` — Alvaro, Nov 01 '17 at 15:57
@melpomene clearly is not "the text after the colon" I want to get, call it whatever :) — Alvaro, Nov 01 '17 at 16:01
Somewhat buried in the docs for [String.prototype.match](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match) it says "if you want to obtain capture groups and the global flag is set, you need to use RegExp.exec() instead." — James, Nov 01 '17 at 16:07

Constantin Groß · Accepted Answer · 2017-11-01T16:06:55.293

1

You have to use regex.exec() instead of .match(). Then you can access the matching groups as an ordinary array:

var text = $('.text').html();
var regex = new RegExp('Concept number 1:(.*?)<br>');
var matches = regex.exec(text);

console.log(matches[1]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text">
Concept number 1: my content here1<br>
Concept number 2: my content here2<br>
Concept number 3: my content here3<br>
</div>

edited Nov 01 '17 at 16:06

answered Nov 01 '17 at 16:02

Constantin Groß

10,719
4
24
50

1

Why use `g` at all? – melpomene Nov 01 '17 at 16:06
Good catch, just copied that over from the question – Constantin Groß Nov 01 '17 at 16:07

score 1 · Answer 2 · answered Nov 01 '17 at 16:06

Personally I would work off the DOM and not the innerHTML

var text = $('.text').contents()  //get all the textnodes and elements
             .filter( function (i, node) { //get just the text nodes
               return node.nodeType==3
             }).map( function (i, node) {  //get the text you are after
               var match = node.nodeValue.match(/:\s+(.*)/)
               return match ? match[1] : undefined
            }).get()  //turn jQuery object into array
console.log(text)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text">
Concept number 1: my content here1<br>
Concept number 2: my content here2<br>
Concept number 3: my content here3<br>
</div>

Because matching HTML with a regular expression is not the best thing in the world. The code above could skip the filter line and just do the match. — epascarello, Nov 01 '17 at 16:45

Match text after colon and before new line - Javascript

2 Answers2