Как сделать простой prettyprint <pre>с помощью jquery - PullRequest
Новая
       19

Как сделать простой prettyprint <pre>с помощью jquery

7 голосов
/ 01 декабря 2011

http://jsfiddle.net/JamesKyle/L4b8b/

Я пытаюсь создать чрезвычайно простую функцию prettyprint с помощью jQuery, но я не знаю, как найти элементы, атрибуты и значения (показано в jsfiddle).

Я пытаюсь выполнить следующее:

  1. Обернуть элементы с помощью <span class="element" />
  2. Обернуть атрибуты с помощью <span class="attribute" />
  3. Обернуть значения с помощью <span class="value" />
  4. Заменить < на &lt
  5. Заменить > на &gt

Воттекущий jQuery, который у меня есть: 

$(document).ready(function() {

    $('pre.prettyprint').each(function() {

        $(this).css('whitespace','pre-line');
        /* Why isnt ^this^ working? */

        var code = $(this).html();

        // How should I define the following

        var element = $(code).find(/* ELEMENTS */);
        var attribute = $(code).find(/* ATTRIBUTES */);
        var value = $(code).find(/* Values */);

        $(element).wrap('<span class="element" />');
        $(attribute).wrap('<span class="attribute" />');
        $(value).wrap('<span class="value" />');

        $(code).find('<').replaceWith('&lt');
        $(code).find('>').replaceWith('&gt');
    });
});

, который пытается отформатировать это: 

<code><pre class="prettyprint">
    <a href="http://website.com">Visit Website</a>
    <a href="#top">Back to Top</a>

в это: 

<code><pre class="prettyprint">
    <span class="element">a <span class="attribute">href</span>=<span class="value">”http://website.com”</span></span>Visit Website<span class="element">/a</span>
    <br/>
    <span class="element">a <span class="attribute">href</span>=<span class="value">”#top”</span></span>Back to Top<span class="element">/a</span>

Спасибо заранее!

Вы можете увидеть jsfiddle здесь: http://jsfiddle.net/JamesKyle/L4b8b/

Ответы [ 3 ]

2 голосов
/ 01 декабря 2011

Настоящая магия заключается в обработке тега произвольных свойств. Вот простая «якорная» версия: jsFiddle 

$('pre.prettyprint').each(function() {
    $('a').each(function(){
        $anchor = $(this);
        html = '<span class="element">&lt;a ';
        html += '<span class="attribute">href</span>=<span class="value">"' + $anchor.attr('href') + '"&gt;</span>';
        html += '</span>' + $anchor.text() + '<span class="element">&lt;/a&gt;</span>'
        $anchor.replaceWith(html);
    });
});
2 голосов
/ 01 декабря 2011

Я не знаю, как это сделать с помощью jQuery, и никто другой тоже не делает, потому что это не так просто, как вы это представляете.К счастью для вас, кто-то уже написал крутое решение для симпатичной печати в JavaScript для разметки:

http://prettydiff.com/markup_beauty.js

Насколько я знаю, это самый полный алгоритм симпатичной печати для языков разметкикогда-либо написано.

0 голосов
/ 01 декабря 2011

Если честно, вы не сможете обернуть элементы и атрибуты так, как вы хотите, используя .find(). Самый простой способ добиться того, чего вы хотите, - это использовать регулярные выражения что нужно обернуть и применить. Конечно, это намного легче сказать, чем сделать

...