如何使用jQuery制作一个简单的漂亮打印<pre>？

Question

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

我正在尝试实现以下内容：

1. 用 <span class="element" /> 包装元素
2. 用 <span class="attribute" /> 包装属性
3. 用 <span class="value" /> 包装值
4. 将 < 替换为 &lt
5. 将 > 替换为 &gt

下面是我目前拥有的jQuery：

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

$(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/

- James Kyle

---

这并不是真的“简单”;) - Blender

与我看到的指令相比，这简直是哈哈大笑。 - James Kyle

“whitespace” 应该翻译为“空白字符”，而非“白空格”。原文中的问题是“whitespace”是否应该写成“white-space”，答案是“是”，因为在CSS中，用连字符“-”把单词连接起来更为常见。 - Jay Gilford

@JayGilford 天啊，谢谢你！我一直盯着它看，不知道我错在哪里？ - James Kyle

呵呵，很容易错过 :) 纯属偶然我发现了它。 - Jay Gilford

Answer 1

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

http://prettydiff.com/markup_beauty.js

据我所知，它是有史以来最完整的标记语言漂亮打印算法。

- austincheney

---

好的，你能展示一下如何使用吗？因为我无法弄清楚。 - James Kyle

markup_beauty.js是平台独立的，因此可以在浏览器或其他地方使用。您可以直接在Pretty Diff应用程序中使用它，作为其prettydiff.js的包含组件进行操作。要使用它，只需调用函数markup_beauty并传入如markup_beauty.js文件顶部所述的必要参数即可。 - austincheney

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);
    });
});

- Sinetheta

Answer 3

说实话，你不能像你想要的那样使用.find()来包装元素和属性。实现你想要的最简单的方法是使用正则表达式来找出需要包装的内容，并进行应用。当然，这比说起来容易得多。

- Jay Gilford

---

你知道@austincheney提到的prettyprint怎么使用吗？ - James Kyle

我不能说我曾经使用过它，但是在谷歌上应该有教程。现在已经凌晨4点了，我想是时候去睡觉了。也许明天再看一下 :) - Jay Gilford