Манипулировать переменную html-string с javascript

Мне нужно манипулировать строковой переменной с помощью JavaScript, который имеет некоторое html-содержимое. Я хочу найти некоторые элементы, изменить их и обернуть эти элементы другим контейнером div.Манипулировать переменную html-string с javascript

Как я могу получить это:

var myArr = ['Foo', 'Bar']; 
var contenthtml = "<p>Foo</p> 
    <p>Lorem ipsum dolor sit amet</p> 
    <p>Lorem <b>ipsum</b> dolor sit amet</p> 
    <p>Lorem ipsum dolor sit amet</p> 
    <p>Bar</p> 
    <p>Lorem ipsum dolor sit amet</p>";

к этому:

contenthtml = "<div class='foo'><h1>Foo</h1> 
    <p>Lorem ipsum dolor sit amet</p> 
    <p>Lorem <b>ipsum</b> dolor sit amet</p> 
    <p>Lorem ipsum dolor sit amet</p></div> 
    <div class='bar'><h1>Bar</h1> 
    <p>Lorem ipsum dolor sit amet</p></div>";

источник

2014-02-14 user3142695

Регулярные выражения, возможно, что вы после (хотя они могут причинить много неприятностей, как они могут помочь ...) –

JQuery имеет ряд полезные функции для работы с блоками элементов DOM, их обертывание в другие элементы и т. д. – Barmar

@Barmar Но я не знаю, как использовать JQuery, поскольку html-код находится в переменной. Это не часть DOM. Поэтому у меня есть эти переменные (строка и массив), и вам нужно получить управляемую строку. – user3142695

Я использовал некоторые DOM для решения этой проблемы. Для тех, кто предпочитает решение DOM, а не RegExp:

Append elements in a variable instead of a temporary DOM

источник

2014-02-17 12:15:30 user3142695

Я не конечно, что вы имеете в виду. Насколько я понял, вы попросили изменить строку в другую строку. – Toothbrush

Да. Но это строка html. Так не лучше ли манипуляция с хозяином? – user3142695

Я полагаю, что это так, но регулярное выражение, как правило, быстрее, чем DOM-манипуляция с помощью RegExp. Можете ли вы включить код, который вы использовали для его достижения, пожалуйста? – Toothbrush

Это было бы немного проще с прямой вверх DOM замены/упаковки (на самом деле, я написал такое но переписал его, когда я увидел ваш комментарий о необходимости ввода строки), но вот решение, использующее только строку в качестве входных данных:

var myArr = ['Foo', 'Bar']; 
var contenthtml = '<p>Foo</p>\n' 
    + '<p>Lorem ipsum dolor sit amet</p>\n' 
    + '<p>Lorem <b>ipsum</b> dolor sit amet</p>\n' 
    + '<p>Lorem ipsum dolor sit amet</p>\n' 
    + '<p>Bar</p>\n' 
    + '<p>Lorem ipsum dolor sit amet</p>'; 
var elements = $.parseHTML(contenthtml); 
var tmp = ''; 
$.each(elements, function(index, element) { 
    $.each(myArr, function(i, e) { 
     if (element.innerHTML == e) { 
      elements[index] = $('<h1>' + e + '</h1>').get(0); 
      return; 
     } 
    }); 
    if (elements[index].outerHTML) { 
     tmp += elements[index].outerHTML + '\n'; 
    } 
}); 
contenthtml = '<div class="foo">' + tmp + '</div>'; 
console.log(contenthtml);

jsfiddle

источник

2014-02-14 22:02:18

Большое спасибо. Но проблема все еще остается. Поскольку элементы из массива будут изменены на h1-элемент, все элементы из одного h1-элемента в следующий элемент должны быть развязаны в div-контейнере. Таким образом, в этом примере должен быть два div-контейнера: первый из h1-foo в h1-bar, а второй из h1-bar в следующий h1-элемент (в этом случае до конца) – user3142695

Вы можете использовать регулярные выражения (по аналогии с моим другим ответом на https://stackoverflow.com/a/21803683/3210837):

var keywordsRegEx = keywords.map(function(x){return x.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');}).join('|'); 
var result = str.replace(new RegExp('<p>(' + keywordsRegEx + ')</p>\r\n((?:[ \t]*<p>(?:(?!' + keywordsRegEx + ').)*</p>(?:\r\n)?)*)', 'mgi'), '<div><h1 class="$1">$1</h1>\r\n$2</div>\r\n');

См http://jsfiddle.net/ncu43/1/ для полного примера.

Что такое регулярное выражение, оно соответствует <p>, одному из ключевых слов, </p>, а затем абзацу (не содержащему одного из ключевых слов) ноль или более раз.

источник

2014-02-17 10:46:44 Toothbrush

Манипулировать переменную html-string с javascript

ответ

Смежные вопросы