正则表达式捕获特定单词后的大括号

Question

我想捕获特定选择器之后大括号之间的字符串。例如，我有这样的字符串：

<div id="text-module-container-eb7272147" class="text-module-container"><style>#123-module-container-eb7272147 p{text-color:#211E22;bgcolor:test;} #text-module-container-eb7272147 p{color:#211E1E;} #text-module-container-eb7272147 p{color:#123444;} </style>

现在，如果我给选择器 #123-module-container-eb7272147 p 它应该返回 text-color:#211E22;bgcolor:test;

我可以获取大括号之间的数据，但不能使用特定的选择器。这是尝试过的代码 https://regex101.com/r/AESL8q/1

Answer 1

您可以对选择器和左大括号使用正向后查找，然后捕获不是右大括号的所有字符，并对右大括号使用正向前查找（可选）：

/(?<=#123-module- container-eb7272147 p\{)[^}]+(?=\})/

• 正向后查找是通过 (?<= ) 完成的。
• 对于选择器，您必须转义一些字符，通常如果您有类选择器，则应该转义点。左大括号也。
• 您希望大括号之间的匹配是 [^}]+ 来表示除右大括号之外的任何字符一次或多次。后面加一个问号会使其变得不贪心，但我认为没有必要。如果您使用点来匹配任何内容，就会出现这种情况。
• 正向前瞻是通过 (?= ) 完成的。

您可以在这里测试：

/**
 * Escape characters which have a meaning in a regular expression.
 * 
 * @param string The string you need to escape.
 * @returns The escaped string.
 */
function escapeRegExp(string) {
    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\
amp;');
}

let button = document.querySelector('#extract');

button.addEventListener('click', function(event) {
  let html = document.querySelector('#html').value;
  let selector = document.querySelector('#selector').value;
  let pattern = new RegExp('(?<=' + escapeRegExp(selector) + '\s*\{)[^}]+(?=\})');
  let matches = pattern.exec(html);
  if (matches) {
    alert("The extracted CSS rules:\n\n" + matches[0]);
  }
  event.preventDefault();
});

html, body {
  font-family: Arial, sans serif;
  font-size: 14px;
}

fieldset {
  min-width: 30em;
  padding: 0;
  margin: 1em 0;
  border: none;
  display: flex;
}

label {
  margin-right: 1em;
  width: 6em;
}

input[type="text"],
textarea {
  width: calc(100% - 7em);
  min-width: 20em;
  margin: 0;
  padding: .25em .5em;
}

input[type="submit"] {
  margin-left:  7.1em;
  padding: .2em 1em;
}

<form action="#">
  <fieldset>
    <label for="selector">Selector: </label>
    <input type="text" id="selector" name="selector"
           value="#123-module-container-eb7272147 p">
  </fieldset>
  <fieldset>
    <label for="">HTML code:</label>
    <textarea id="html" name="html" cols="30" rows="10"><div id="text-module-container-eb7272147" class="text-module-container"><style>#123-module-container-eb7272147 p{text-color:#211E22;bgcolor:test;} #text-module-container-eb7272147 p{color:#211E1E;} #text-module-container-eb7272147 p{color:#123444;} </style><div style="background-color: rgb(168, 27, 219); color: rgb(33, 30, 30);"><span style="color:#3498db;">Click the edit button to replace this conte</span>nt with your own.</div></div></textarea>
  </fieldset>
  <fieldset>
    <input type="submit" id="extract" value="Extract the CSS rules">
  </fieldset>
</form>

或者在这里玩一下：https://regex101.com/r/N5cVKq/1