2017-06-02 56 views
-1

用例1,以產生一個JSON陣HTML元素:需要在Javascript

<sub><b><i>boldSubscriptContent</i></b></sub> 

輸出JSON:

[{ 
    "subscript": true, 
    "content": "boldSubscriptContent",  
    "bold": true 
}] 

用例2:

withoutAnyHTML<b>boldContent<sub>boldSubscriptContent</sub></b> 

輸出JSON:

[{ 
    "content": "WithoutAnyHTML" 
}, { 
    "bold": true, 
    "content": "boldContent"  
}, { 
    "bold": true, 
    "subscript": true, 
    "content": "boldSubscriptContent", 
    "outerHTML": "<sub>subscriptContent</sub>" 
}] 

使用案例3:

<b><i>ItalicContent</i><sub>subscriptContent</sub><sup>supscriptContent</sup></b> 

輸出JSON:

[{ 
    "italic": true, 
    "bold": true, 
    "content": "ItalicContent", 
    "outerHTML": "<i>ItalicContent</i>" 
}, { 
    "subscript": true, 
    "bold": true, 
    "content": "subscriptContent", 
    "outerHTML": "<sub>subscriptContent</sub>" 
}, { 
    "superscript": true, 
    "bold": true, 
    "content": "supscriptContent", 
    "outerHTML": "<sup>supscriptContent</sup>" 
}] 
+2

隨意一旦你完成後您的解決方案它... – Andreas

+1

首先,自己嘗試一下。 SO不是代碼寫入服務。其次,請讓你的問題具有可讀性。在我編輯它之前,這是一個完整的混亂。 –

+0

感謝您使它正確..第一次使用堆棧溢出發佈我的問題。下次會照顧。 –

回答

0

這裏是解決方案:

JSFiddle working link

<html> 
    <head> 
    <script src = "https://code.jquery.com/jquery-3.2.1.min.js"> </script> 
    <script> 

     var res = []; 

     function parseText(cont, det) { 

      det = JSON.parse(JSON.stringify(det)); 
      if (cont.tagName === 'B') 
      det.b = true; 
      if (cont.tagName === 'I') 
      det.i = true; 
      if (cont.tagName === 'U') 
      det.u = true; 
      if (cont.tagName === 'SUB') 
      det.sub = true; 
      if (cont.tagName === 'SUP') 
      det.sup = true; 
      if (cont.tagName) { 
      for (var i = 0; i < cont.childNodes.length; i++) { 
       var child = cont.childNodes[i]; 
       if (child.tagName) { 
       parseText(child, det); 
       } else { 
       res.push({ 
        det, 
        content: child.data 
       }); 
       } 
      } 
      } else { 
      res.push({ 
       det, 
       content: cont.data 
      }); 
      } 

     } 

     function calculate(){ 
      var str = document.getElementById('str').value; 
      var cont = $('<div></div>').html(str); 
      for (var i = 0; i < cont.length; i++) { 
       parseText(cont[i], { 
       i: false, 
       b: false, 
       u: false, 
       sub: false, 
       sup: false 
       }); 
      } 
      var resHTML = ''; 
      for (var i = 0; i < res.length; i++) { 
       resHTML += res[i].content + "\t:" + JSON.stringify(res[i].det) + "</br>"; 
      } 
      document.getElementById('output').innerHTML = resHTML; 
      } 

    </script> 

    </head> 
    <body> 
     <input type="text" id="str" value="<b>content<sup>superTest</sup><sub>subTest</sub><i>testItalic</i></b>" /> 
     <button onclick="calculate()">Parse</button> 
     <div id = "output"></label> 
    </body> 
    </html> 
+0

我在遞歸函數parseText中創建了det對象的克隆。我這樣做是因爲det對象的值在遞歸堆棧的所有級別上都是相同的。 我需要關於如何在Javascript中使用遞歸的專家意見,這是正確的方法,通過克隆遞歸的每個級別的新副本。 –