Отображение источника одного <div>в другом с регулярным выражением

Question

Хорошо, я сдаюсь и был бы очень признателен, если бы вы, ребята, могли взглянуть на это ради меня? Я постараюсь не бродить.

Цель состоит в том, чтобы иметь «визуализированный вид», показывающий «визуализированный» HTML (кликабельные ссылки), и «исходный вид», показывающий фактический HTML того, что находится в визуализированном виде. Когда ссылка нажата, она больше не становится ссылкой и просто становится текстом привязки. Затем источник должен обновить, чтобы отразить это. В любом случае, это идея.

Отображаемые ссылки имеют атрибуты id, href, title и class, а также тег <strong>. Я не хочу, чтобы идентификатор, заголовок или класс отображались в исходном представлении.

У меня так, после нажатия кнопки 'href' и <strong> удаляются, затем я удаляю класс и заголовок из ВСЕХ ссылок. Мне нужно сохранить идентификатор в исходном виде, чтобы созданная мной функция отмены все еще работала.

Итак, проблема в основном:

<div> с идентификатором 'rendered-view' содержит визуализированную версию:

<a id="link1">blah blah</a>
<a id="link2" href="http://www.somesite.com"><strong>Visit this site</strong></a>

т.е:

бла-бла

Посетите этот сайт

Исходное представление должно привести к:

blah blah
<a href="http://www.somesite.com"><strong>Visit this site</strong></a>

Я знаю, что понадобится регулярное выражение, в котором я сейчас сильно терплю неудачу. Я действительно парень из PHP и новичок в jQuery.

Answer 1

Предположим, у вас есть два div с идентификаторами rendered и source:

Rendered:
<div id="rendered" style="border: 1px solid #000">
    <a id="link1">blah blah</a>
    <a id="link2" href="http://www.somesite.com"><strong>Visit this site</strong></a>
</div>
Source:
<div id="source" style="border: 1px solid #000">
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Затем это заполняет другой div источником первого div, удаляя некоторые атрибуты (id, title икласс):

$('#source').html(
    $('#rendered')
        .clone()
        .find('*')
            .removeAttr('id')
            .removeAttr('title')
            .removeAttr('class')
        .end()
        .html()
        .replace(/\&/g, '&')
        .replace(/\</g, '&lt;')
        .replace(/\>/g, '&gt;')
);​

Конечно, вам нужно запустить это после того, как DOM будет готов.

(я не уверен в необходимости экранирования &amp.);

Answer 2

См. Вопрос / ответ: Вы не можете разобрать [X] HTML с регулярным выражением. Потому что HTML не может быть проанализирован с помощью регулярных выражений. Regex не является инструментом, который можно использовать для правильного анализа HTML ...

А если серьезно, то, что вы хотите сделать, вероятно, можно сделать намного лучше с помощью манипуляций с JavaScript и DOM. Я знаю намного больше о Prototype, чем jQuery, и я мог бы довольно легко кодировать его в Prototype, но я бы настоятельно рекомендовал использовать встроенный в браузер HTML-парсер. Мой основной подход будет выглядеть примерно так:

1. Вставить закодированный HTML как в исходный вид, так и в визуализированный. Вид
2. Перебрать все элементы исходного представления:
   1. Если элемент является ссылкой, удалите идентификатор, заголовок и класс
3. Кодировать все сущности HTML в представлении исходного кода innerHTML; прототип делает это с помощью регулярного выражения: String.prototype.escapeHTML = function() { return this.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"); }
4. Перебрать все дочерние элементы a представленного представления
   1. Наблюдайте за их событием click и присоединяйте ваш собственный обработчик, отменяя обработчик по умолчанию
   2. Выполните любую другую обработку, которая может вам понадобиться. (Я все еще немного запутался в том, что ты пытаешься сделать)

Я знаю, что даю немного расплывчатый ответ на ваш вопрос ... если бы я был лучше с jQuery, я мог бы предоставить какой-то реальный код, который, я уверен, вам нужен. Любые эксперты jQuery хотят помочь Джону? : -)