Regex для выбора beween («и»

Question

Я пытался искать ответ, но ответ не подходит моим потребностям ...

Это мой код:

<div><svg onclick="addIngredient('Bacon', -1);"><path></path></svg> 
<button onclick="addIngredient('Bacon', 1);"></button><p>6 Bacon</p></div> 

<div><svg onclick="addIngredient('Paprika', -1);"><path></path></svg> 
<button onclick="addIngredient('Paprika', 1);"></button><p>3 Paprika</p></div> 

<div><svg onclick="addIngredient('Sliced Meat', -1);"><path></path></svg> 
<button onclick="addIngredient('Sliced Meat', 1);"></button><p>1 Sliced Meat</p></div> 

Я хотел бы, чтобы захватить слова между svg onclick="addIngredient(', и '

после слова. Так что я, например, хотел бы получить слово Bacon, Paprika или Sliced Meat

Я попытался сделать это, но он просто не работает ..

var stringy = '<div><svg onclick="addIngredient('Bacon', -1);"><path></path></svg> 
<button onclick="addIngredient('Bacon', 1);"></button><p>6 Bacon</p></div> 

<div><svg onclick="addIngredient('Paprika', -1);"><path></path></svg> 
<button onclick="addIngredient('Paprika', 1);"></button><p>3 Paprika</p></div> 

<div><svg onclick="addIngredient('Sliced Meat', -1);"><path></path></svg> 
<button onclick="addIngredient('Sliced Meat', 1);"></button><p>1 Sliced Meat</p></div>'; 

var result = stringy.match("svg onclick="addIngredient(([^}]*)')"); 
console.log(result); 

Как я могу сделать это правильно?

Answer 1

Вы можете использовать следующее регулярное выражение. Он использует .*?, чтобы соответствовать наименьшую характер возможного, пока не приходит к следующему '

<svg.+?onclick="addIngredient\('(.*?)' 

Вот бегущий пример. Вам нужно использовать функцию .exec(), чтобы получить только группу $1.

var stringy = document.getElementById("main").innerHTML; // read the HTML instead of hard-coding it here as a string 
 
var regex = /<svg.+?onclick="addIngredient\('(.*?)'/g; 
 
var match = regex.exec(stringy); 
 

 
while(match !== null) { 
 
    console.log(match[1]); 
 
    match = regex.exec(stringy); 
 
}

<div id="main"> 
 
    <div><svg onclick="addIngredient('Bacon', -1);"><path></path></svg> 
 
    <button onclick="addIngredient('Bacon', 1);"></button><p>6 Bacon</p></div> 
 

 
    <div><svg onclick="addIngredient('Paprika', -1);"><path></path></svg> 
 
    <button onclick="addIngredient('Paprika', 1);"></button><p>3 Paprika</p></div> 
 

 
    <div><svg onclick="addIngredient('Sliced Meat', -1);"><path></path></svg> 
 
    <button onclick="addIngredient('Sliced Meat', 1);"></button><p>1 Sliced Meat</p></div> 
 
</div>

---

Просто для улучшения ваших навыков регулярных выражений объяснения ваших ошибок:

var regex = "svg onclick="addIngredient(([^}]*)')"; 
         ^   ^^^^

1. Вы должны избежать " с \, потому что все вашим регулярным выражением выражение окружено " (Строки JavaScript)
2. Вам нужно сбежать от ( с косой чертой, потому что скобка является началом группы регулярных выражений.
3. Почему вы ищете комплект без }? Вы можете просто искать любого персонажа (.).
4. Если вы используете * без ?, он будет жадным и останавливаться только при последнем входе в документ. Обычно вы хотите, чтобы селектор не был жадным.
5. Последний кронштейн - это особый символ, которому нужно ускользнуть. Вам не нужен этот кронштейн, потому что этого, очевидно, уже достаточно, чтобы остановиться на '.