ショートコード文字列から属性を取得するJavascript

Question

私は、WordPressデータベースからショートコードのスティッキングを取得するJavascriptアプリケーションを使用しています。だから私はこのような変数で終わる可能性があります

var shortcode = '[wp-form id="1946" title="My Test Form"]'; 

私はタイトルを抽出できるように、属性にアクセスするために、純粋なJavascriptを使用しているよ、など私これはいくつかのフォームまたは正規表現とスプリット（だろうと想像します）。しかし、これまでのところ、私の努力は空白で分割することによって挫折してしまいます。

Answer 1

このコードを使用してみてください：

var shortcode = '[wp-form id="1946" title="My Test Form"]';  
var attributes = {}; 
shortcode.match(/[\w-]+=".+?"/g).forEach(function(attribute) { 
    attribute = attribute.match(/([\w-]+)="(.+?)"/); 
    attributes[attribute[1]] = attribute[2]; 
}); 
console.log(attributes); 

出力：

Object {id: "1946", title: "My Test Form"} 

Answer 2

は、正規表現を使用して行うことができます単に

var shortcode = '[wp-form id="1946" title="My Test Form"]'; 
// use of regex to extract id , title 
var arr = /id\=\"(.*?)\".*title=\"(.*?)\"/.exec(shortcode); 
var id = arr[1]; 
var title = arr[2]; 

Answer 3

RegExp.prototype.execを使用してそれらを一致させるために、この場合にはString.prototype.splitを使用し、その値を持つ属性を記述してパターンを構築しようとしないでください：

var re = /([\w-]+)="([^"]*)"/g; 
var str = '[wp-form id="1946" title="My Test Form"]'; 
var m; 

while ((m = re.exec(str)) !== null) { 
    console.log(m[1] + "\n" + m[2] + "\n"); 
} 

Answer 4

さて、私は遅れて相手にしていていても私は答えをスローするつもりです。私は誰もが、私はこれを作るためにはるかにファッショナブルなコメントにするために使用推測"you can't parse with just a regular expression!"を訴えていない驚いています。とにかく、正規表現だけを使用して、すでに与えられた合理的な試みを見ているのは完全に合理的だと思います。

しかし、に本当にのタグを解析したい場合は、ここではすばやいパーサーがあります。

function parseShortCode(shortCode) { 
 
    var re = /(\s+|\W)|(\w+)/g; 
 
    var match; 
 
    var token; 
 
    var curAttribute = ''; 
 
    var quoteChar; 
 
    var mode = 'NOT STARTED' 
 
    var parsedValue = { 
 
    name: '', 
 
    attributes: {} 
 
    }; 
 
    
 
    while ((match = re.exec(shortCode)) != null) { 
 
    token = match[0]; 
 
    switch (mode) { 
 
     case 'NOT STARTED': 
 
     if (token == '[') { 
 
      mode = 'GETNAME'; 
 
     } 
 
     break; 
 
     case 'GETNAME': 
 
     if (!(/\s/.test(token))) { 
 
      parsedValue.name += token; 
 
     } else if (parsedValue.name) { 
 
      mode = 'PARSING'; 
 
     } 
 
     break; 
 
     case 'PARSING': 
 
     // if non text char throw it 
 
     if (token == "]") { mode = 'COMPLETE'; } 
 
     else if (token == "=") { 
 
      if (!curAttribute) throw ('invalid token: "' + token + '" encountered at ' + match.index); 
 
      else mode = 'GET ATTRIBUTE VALUE'; 
 
     } 
 
     else if (!/\s/.test(token)) { 
 
      curAttribute += token; 
 
     } else if (curAttribute) { 
 
      mode = 'SET ATTRIBUTE' 
 
     } 
 
     break; 
 
     case 'SET ATTRIBUTE': 
 
     // these are always from match[1] 
 
     if (/\s/.test(token)) { parsedValue.attributes[curAttribute] = null; } 
 
     else if (token == '=') { mode = 'GET ATTRIBUTE VALUE'; } 
 
     else { throw ('invalid token: "' + token + '" encountered at ' + match.index); } 
 
     break; 
 
     case 'GET ATTRIBUTE VALUE': 
 
     if (!(/\s/.test(token))) { 
 
      if (/["']/.test(token)) { 
 
      quoteChar = token; 
 
      parsedValue.attributes[curAttribute] = ''; 
 
      mode = 'GET QUOTED ATTRIBUTE VALUE'; 
 
      } else { 
 
      parsedValue.attributes[curAttribute] = token; 
 
      curAttribute = ''; 
 
      mode = 'PARSING'; 
 
      } 
 
     } 
 
     break; 
 
     case 'GET QUOTED ATTRIBUTE VALUE': 
 
     if (/\\/.test(token)) { mode = 'ESCAPE VALUE'; } 
 
     else if (token == quoteChar) { 
 
      mode = 'PARSING'; 
 
      curAttribute = ''; 
 
     } 
 
     else { parsedValue.attributes[curAttribute] += token; } 
 
     break; 
 
     case 'ESCAPE VALUE': 
 
     if (/\\'"/.test(token)) { parsedValue.attributes[curAttribute] += token; } 
 
     else { parsedValue.attributes[curAttribute] += '\\' + token; } 
 
     mode = 'GET QUOTED ATTRIBUTE VALUE'; 
 
     break; 
 

 
    } 
 
    } 
 
    if (curAttribute && !parsedValue.attributes[curAttribute]) { 
 
    \t parsedValue.attributes[curAttribute] = ''; 
 
    } 
 
    return parsedValue; 
 
} 
 

 
function doUpdate() { 
 
    var text = document.getElementById('shortcode').value; 
 
    var output; 
 
    try { 
 
    output = parseShortCode(text); 
 
    } catch (err) { 
 
    output = err; 
 
    } 
 

 
    document.getElementById('result').innerHTML = JSON.stringify(output); 
 
} 
 

 
document.getElementById('updateBtn').addEventListener("click", doUpdate); 
 
doUpdate();

Short Code: 
 
<textarea type=text id="shortcode" style="width:100%; height:60px">[wp-form id="1946" title="My Test Form"]</textarea> 
 
<div> 
 
    <button id="updateBtn">Update</button> 
 
</div> 
 
<div> 
 
    <pre id="result"></pre> 
 
</div>

私は、これはバグを持っていると確信しているが、私はそれがあなたのケースで動作するようになった、と他の回答を扱うことができませんでしたいくつかのケース。ショートコードが本当に強くならない限り、私は正規表現に固執します。しかし、引用符で囲まれていない属性値や空の属性のようなものに遭遇すると、これがうまくいくかもしれません。