jQuery 2.1.0 | Лучший способ разграничить длинную строку и извлечь из нее подстроки

Клон предоставляет как текст, так и str, который был извлечен и дополнен ; в массив <div id="str"> и arr. Клон также предоставляет «шаблон» для дальнейшей обработки. В части , после завершения извлечения текста и добавления отдельного div текста в массив, клонированный текст удаляется, в результате чего получается «пустой» шаблон, см. el.innerText = "";. В // reverse process сохраненный текст в arr повторно заполняет "пустой" ul "шаблон" ; см. синий «клон». Чтобы повторно заполнить «шаблон» другими данными, можно указать $.each() с другим массивом, имеющим тот же .length, что и arr; например.,

var update = ["abc", 123, .., ..];

, имеющий тот же порядок и длину, что и arr или , 15 , в текущем «шаблоне»; затем замените исходный ul на clone (обновите, замените существующий ul на clone, заполните другим text)< /а>.

В этом jsfiddle (обновить, добавить новый "шаблон" к body) "шаблон" повторно заполняется элементы' className вместо ранее извлеченных и сохраненных str , как это происходит в части ниже

Пытаться

// clone `ul`
var clone = $("ul").clone();
// create `<div id=str>`
var div = $("<div id=str>");
// `str` , text string
var str = "";
// `arr` , text array
var arr = [];
clone.find(".master div").each(function (i, el) {
    $(el).text(function (_, o) {
        return o + ";"
    });
    // substituted `el.innerText.trim()` for `$.trim($(el).text());`
    str = el.innerText.trim();
    arr.push(str);
    div.append(str);
    // replace `innerText` of `div` elements ,
    // with empty string , save `clone` `ul` as template 
    el.innerText = "";
});
// `str`
str = div.text();
// do stuff with `str`
div.css("color", "blue").prependTo("body");
// log processes
console.log(clone, div.text(), str, arr);

// reverse process
$.each(arr, function(k, v) {
    clone.find(".master div").eq(k)
    .text(function(_, o) {
      return o + v.replace(/;$/g, "")
    });
});
// log processes
console.log(clone.find(".master div").text());
// do stuff with clone , after replacing text
clone.css("color", "blue").appendTo("body");

jsfiddle http://jsfiddle.net/guest271314/jhpsz018/

Массив объектов, вероятно, является лучшим способом хранения ваших данных, где каждый объект имеет следующую форму:

var exampleRow = {
  id: 123,
  nameid: "MN9478",
  name: "Paula",
  title: "My plane",
  note: "how are you"
};

Затем вы можете получить доступ к атрибутам:

exampleRow.id // 123
// or
exampleRow["id"] // Also 123

Поместив каждую из этих строк в массив, вы получите данные в нормализованной форме:

var data = [{
    id: 123,
    nameid: "MN9478",
    name: "Paula",
    title: "My plane",
    note: "how are you"
  }, {
    id: 456,
    nameid: "MN7649",
    name: "John",
    title: "My boat",
    note: "I am good"
  }, {
    id: 789,
    nameid: "MN3995",
    name: "Janette",
    title: "My car",
    note: "where are you"
  }
];

Затем, в этот момент, вы можете легко преобразовать данные в любую структуру:

// For the complicated DOM structure
data.map(function(userInfo) {
    // Simplified to make it clear(er) what's going on
    return "<li><div class='master'><div class='note'>" + userInfo.note + "</div><div class='id'>" + ... etc. ... + "</div></li>";
});

// For the single string
data.reduce(function(finalString, userInfo) {
  return finalString + ";" + Object.keys(userInfo).map(function(k) { return userInfo[k]; }).join(";");
}, "");