JavaScript: разобрать эту строку

Question

Вот длинная строка (на самом деле значение ключа JSON):

"\u003cspan title=\"5 gold badges\"\u003e\u003cspan class=\"badge1\"\u003e●\u003c/span\u003e\u003cspan class=\"badgecount\"\u003e5\u003c/span\u003e\u003c/span\u003e\u003cspan title=\"8 silver badges\"\u003e\u003cspan class=\"badge2\"\u003e●\u003c/span\u003e\u003cspan class=\"badgecount\"\u003e8\u003c/span\u003e\u003c/span\u003e\u003cspan title=\"57 bronze badges\"\u003e\u003cspan class=\"badge3\"\u003e●\u003c/span\u003e\u003cspan class=\"badgecount\"\u003e57\u003c/span\u003e\u003c/span\u003e"

Мне нужен способ ее анализа, чтобы получить количество золотых, серебряных и бронзовых значков,используя простой JScript в Dashcode.

Answer 1

var str = "\u003cspan title=\"5 gold badges\"\u003e\u003cspan class=\"badge1\"\u003e●\u003c/span\u003e\u003cspan class=\"badgecount\"\u003e5\u003c/span\u003e\u003c/span\u003e\u003cspan title=\"8 silver badges\"\u003e\u003cspan class=\"badge2\"\u003e●\u003c/span\u003e\u003cspan class=\"badgecount\"\u003e8\u003c/span\u003e\u003c/span\u003e\u003cspan title=\"57 bronze badges\"\u003e\u003cspan class=\"badge3\"\u003e●\u003c/span\u003e\u003cspan class=\"badgecount\"\u003e57\u003c/span\u003e\u003c/span\u003e";

var res = {
    gold: 0,
    silver: 0,
    bronze: 0
};

/* using a RexExp
/                    - delimeter
(\d+)                - capturing one or more digits
\s+                  - one or more whitespace characters
(gold|silver|bronze) - capturing the color
/g                   - delimeter (global flag)

to match the information in the title of the spans
and using the replace trick to populate res
*/

str.replace( /(\d+)\s+(gold|silver|bronze)/g, function( all, count, color ) {
    res[color] += parseInt( count );
});

console.log( res ); // Object { gold=5, silver=8, bronze=57}

Answer 2

function getBadgeCounts(s) {
  var badgeCountRE = /title="(\d+)/g, match = null, counts = [];
  while ((match = badgeCountRE.exec(s)) !== null) {
    counts.push(match[1]);
  }
  return {gold: counts[0], silver: counts[1], bronze: counts[2]};
}

Без жестких имен медалей:

function getBadgeCounts(s) {
  var badgeCountRE = /title="(\d+) (\w+)/g, match = null, counts = {};
  while ((match = badgeCountRE.exec(s)) !== null) {
    counts[match[2]] = match[1];
  }
  return counts;
}

Answer 3

Если вы поместите эту строку в вызов jQuery, вы можете запросить фрагмент документа так же, как и любой другой фрагмент HTML:

var badgeHTML = "..." // Your encoded string here

var parsedHTML = $(badgeHTML); // Returns a jQuery collection of HTML nodes

Answer 4

Это строка:

   '<span title="5 gold badges">
        <span class="badge1">&#9679;</span>
        <span class="badgecount">5</span>
    </span>
    <span title="8 silver badges">
        <span class="badge2">&#9679;</span>
        <span class="badgecount">8</span>
   </span>
   <span title="57 bronze badges">
       <span class="badge3">&#9679;</span>
       <span class="badgecount">57</span>
   </span>'

Может быть, вы можете добавить его в невидимый div, чтобы вы могли использовать метод DOM, чтобы получить нужные значения