Javascript, how to use regex to parse string

Question

I have string with multiple {{Start:SomeName}} and I need to repalce it with
<div data-name="SomeName"></div> and {{End:SomeName}} to </div>

I was trying use replace like this replace("{{Start:", '<div data-name="'); but this works only for start part.. maybe some regex, but I don't know how.

I'll be greatful for any help

score 2 · Answer 1 · answered Jun 28 '19 at 07:05

2

Something like this should do the trick:

const input = '{{Start:SomeName}}{{Start:SomeName}} {{End:SomeName}} {{End:SomeName}}'

const result = input.replace(/{{(.+?):(.+?)}}/g, '<div data-name="$2"></div>')
console.log(result)

answered Jun 28 '19 at 07:05

antonku

7,377
2
15
21

ankr · Answer 2 · 2019-06-28T09:02:51.150

2

Perhaps something along these lines

const str = '{{Start:SomeName}} hello {{End:SomeName}} {{Start:AnotherName}} world {{End:AnotherName}}';

const replaced = str.replace(/{{Start:(\w+)}}(.*){{End:(\1)}}/g, (_, name, content) => {
    return `<div data-name="${name}">${content}</div>`;
});

console.log(replaced);

edited Jun 28 '19 at 09:02

answered Jun 28 '19 at 07:06

ankr

647
6
15

Mark · Accepted Answer · 2019-06-28T07:01:46.200

1

With something as structured as your string, it's probably easier to just take a slice() and split() into variables:

let s = "{{Start:SomeName}}"
let [side, name] = s.slice(2, -2).split(':')
let tag = `<div data-name="${name}"></div>`
console.log(tag)

If you have several of these, you can use a regex to find them all in replace() and use the above idea in the replacer function passed to replace() to calculate the replaced value:

let s = "Some text {{Start:SomeName}} some other text {{End:SomeName}}{{Start:SomeName}}more{{End:SomeName}}"

let n = s.replace(/{{(.*?)}}/g, (match, s) => {
    let [side, name] = s.split(':')
    if (side === "Start") return `<div data-name="${name}">`
    else if (side === "End") return '</div>'

})


console.log(n)

edited Jun 28 '19 at 07:01

answered Jun 28 '19 at 06:55

Mark

90,562
7
108
148

Can you add an example of the exact string you are dealing with. Is it multiple of just these tags? Or is there other text interwoven? – Mark Jun 28 '19 at 06:56
let s = "{{Start:SomeName}}{{Start:SomeName}} {{End:SomeName}} {{End:SomeName}} " for example – Kamil Kamil Jun 28 '19 at 06:58

score 0 · Answer 4 · answered Jun 28 '19 at 07:12

result = "{{Start:SomeName}}{{Start:SomeName}} {{End:SomeName}} {{End:SomeName}} ".replace(/{{Start:(\w+)}}|{{End:(\w+)}}/g,(...a)=>{
    if(a[1]){
  return `<div data-name="${a[1]}">`
    }
 else{
  return `</div>`
    }
 
})

console.log(result)

Yves Kipondo · Answer 5 · 2019-06-28T07:19:15.623

You can use the RegEx like bellow

var re = /\{\{Start:(.*)\}\}(.*)\{\{End:(.*)\}\}/g; 
var chaine = "{{Start:SomeName}}Hello World{{End:SomeName}}"

var output = chaine.replace(re,"<div date-name='$1'>$2</div>");

console.log(output)

The first parentheses in the regex capture the name which will be set as the value of attribute data-name and the second catch the content which is enclose inside the START block and END block,

like the regex has capturing parentheses all reference to string which match each capturing parentheses will be accessible by using $ sign follow by the position of the parentheses

Javascript, how to use regex to parse string

5 Answers5