Question

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

我试图用jQuery创建一个非常简单的prettyprint函数，但我不知道如何查找元素，属性和值（显示在jsfiddle中）。

我正在努力完成以下任务：


使用<span class="element" />
换行元素
使用<span class="attribute" />
换行属性
使用<span class="value" />
换算值
将<替换为&lt

将>替换为&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');
    });
});

试图格式化：

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

进入这个：

<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>
</pre>

提前谢谢你！

你可以在这里看到jsfiddle： http://jsfiddle.net/JamesKyle/L4b8b/

Answer 1

我不知道如何使用jQuery，也没有其他人这样做，因为它并不像你想要的那么简单。幸运的是，有人已经在JavaScript中为标记编写了一个badass漂亮打印解决方案：

http://prettydiff.com/markup_beauty.js

据我所知，它是有史以来编写的最完整的标记语言算法。

Answer 2

处理任意属性的标记会产生真正的魔力。这是简单的“锚”版本：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);
    });
});

Answer 3

老实说，你无法使用.find()包装你想要的元素和属性 - 实现你想要的最简单方法是使用正则表达式来找出需要包装和应用的东西。当然，说起来容易做起来容易得多

如何制作简单的漂亮印记<pre> with jquery</pre>

3 个答案: