JavaScript, как использовать регулярные выражения для анализа строки

Question

У меня есть строка с несколькими {{Start:SomeName}}, и мне нужно отменить ее с помощью
<div data-name="SomeName"></div> и {{End:SomeName}} до </div>

Я пытался использовать замену вот так replace("{{Start:", '<div data-name="');, но это работает только для начальной части ... может быть, какое-то регулярное выражение, но я не знаю как.

Я буду благодарен за любую помощь

Answer 1

Примерно так должно получиться:

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

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

Answer 2

Возможно, что-то в этом роде

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);

Answer 3

С чем-то структурированным, как ваша строка, вероятно, проще просто взять slice() и split() в переменные:

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

Если у вас есть несколько из них, вы можете использовать регулярное выражение, чтобы найти их все в replace(), и использовать приведенную выше идею в функции замены, переданной в replace(), чтобы вычислить замененное значение:

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)

Answer 4

Вы можете использовать RegEx, как показано ниже

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)

Первые круглые скобки в регулярном выражении содержат имя, которое будет установлено как значение атрибута data-name, а вторые - содержимое, заключенное в блок * START и блок END,

подобно тому, как регулярное выражение содержит захватывающие скобки, все ссылки на строку, соответствующие каждой записывающей скобке, будут доступны с помощью знака $, за которым следует положение скобок

Answer 5

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)