字符串到DOM到String

时间:2013-08-24 12:30:07

标签: javascript jquery string dom

我从数据库中获得了一些降价文本。我正在使用Showdown.js将此降价转换为HTML:

var showdown = new Showdown.converter();
var str = showdown.makeHtml(myDatabaseString);

当markdown中嵌入代码时,Showdown.js会很好地将其包装到<pre><code>标记中,因此str可能如下所示:

<p>Some text bla</p><pre><code>Some code</pre></code><p>Text again</p>

现在我希望通过使用SyntaxHighlighter突出显示代码片段的语法来使事情变得更漂亮。重要的是,最后我得到一个包含之前所有内容的字符串,以及用于格式化的附加HTML。

我的方法是JQuery操纵DOM的能力:

$(str).each(function() {
    // or can I select only pre within $(str) directly?
    // everything I tried so far to do that failed miserably
    if($(this).is('pre')) {
        var code = $('code', $(this)).text();
        // brush is my SyntaxHighlighter brush that I created earlier
        $('code', $(this)).text(brush.getHtml(code));
        // when I console.log($('code', $(this))) now, everything worked
        // out perfectly
    }
});
// but now I lost all my changes for some reason :-(

return str; // I need to return this as a string again

我是正确的吗?如何在.each循环中保留我所做的更改?

1 个答案:

答案 0 :(得分:3)

那是因为你正在创建一个与str变量无关的jQuery对象,你应该使用创建的jQuery对象。实际上,您正在修改创建的jQuery对象的元素并返回原始/未更改的str变量。我建议:

// Creating a wrapper element 
// and setting it's content by using str variable
var $wrapper = $('<div/>').html(str);

// Modifying descendant pre elements
$wrapper.find('pre').each(function(){
   // implementing the logic
});

// Getting modified HTML content of the created wrapper element
str = $wrapper.html();