用於HTML模板字符串的Javascript RegExp選擇器

Question

我需要一些關於JavaScript正則表達式的幫助。我需要一種方法來選擇以下：

${user.name} 
${user.age} 

從下面的HTML：

<tr> 
    <td>${user.name}</td> 
    <td>${user.age}</td> 
</tr> 

可能有多個<td>在他們和字符串的「用戶」部分不同的值並不總是將成爲用戶。它可能是任何東西。

理想情況下，我希望他們回來作爲一個數組，雖然目前我會解決任何事情。

Answer 1

我不是正則表達式的專家，但我希望它能工作。

var str = "your html" 
var matches = str.match(/\${[a-zA-Z0-9.]+}/g); 

了給定的輸入HTML，輸出將是

["${user.name}", "${user.age}"] 

Answer 2

像這樣的東西可能會幫助你：

str = str.match(/\$\{\w*\.\w*\}/g); 

示例見匹配Regex

var str = "<tr><td>${user.name}</td><td>${user.age}</td></tr>"; 
 
str = str.match(/\$\{\w*\.\w*\}/g); 
 
console.log(str)

說明：

根據需要 *之間的零和無限次，多次地，用之於：
• \$字符$字面上
• \{字符{字面上
• \w*匹配任何單詞字符匹配[a-zA-Z0-9_]
  • 量詞匹配[greedy]
• \.符合字符.字面上
• \w*匹配任何單詞字符[a-zA-Z0-9_]
  • 量詞：*之間的零和無限次，多次地，用之於需要[貪婪] \}匹配字符}字面上
• g修飾符：全局。所有比賽（不要在第一場比賽中返回）

Answer 3

我寫此功能爲你的目的：

/** 
    * This function assumes html with template syntax as a argument 
    * and returns array from this marks. 
    * Example of usage: 
    * If you have html markup like this: 
    * <table> 
    * <tr> 
    *  <td>${user.name}</td> 
    *  <td>${user.age}</td> 
    * </tr> 
    * </table> 
    * 
    * and call function with document.body.innerHTML as a argument 
    * console.log(getTemplates(document.body.innerHTML.toString())); 
    * You will get the following result: 
    * Array [ "${user.name}", "${user.age}" ] 
    * 
    * @param input html string with template marks - ${variable.name} 
    * @returns {Array} - all marks 
    * @author Georgi Naumov 
    * gonaumov@gmail.com for contacts and suggestions. 
    */ 
    function getTemplates(input) { 
     return (input.match(/\$\{[^}\s]+\}/g) || []); 
    } 
    console.log(getTemplates(document.body.innerHTML.toString())); 

您將獲得導致這種形式：

Array [ "${user.name}", "${user.age}" ] 

Answer 4

var 
    // \$\{ ... search for occurrence of template string opener sequence, 
    // ([^.]+) ... then memorize every character (at least one) that is not a dot, 
    // \.  ... look for a single dot - the divider of your template string's sub-domains, 
    // ([^.]+) ... then again memorize every character that is not a dot, 
    // \}  ... finally identify the template string delimiter sequence. 
    regXTemplateString = (/\$\{([^.]+)\.([^.]+)\}/), 

    // make array from any derived html table cell element collection. 
    tableCellList = Array.from(yourTableRowHTMLElement.getElementsByTagName('td')), 

    // reduce table cell array to a data structure that one can work with further 
    viewList = tableCellList.reduce(function (collector, tdElement) { 
    var 
     executedTemplate = regXTemplateString.exec(tdElement.innerHTML); 

    if (executedTemplate) { 

     collector.push({ 
     templateElement : tdElement,   // the html element reference 
     domainName  : executedTemplate[1], // e.g. "user" from "${user.name}" 
     identifier  : executedTemplate[2] // e.g. "age" from "${user.age}" 
     }); 
    } 
    return collector; 

    }, []); 

// do whatever you're pleased with `viewList`.