Jquery - 選択したhtmlタグを値の文字列に置き換えます。

Question

私はいくつかのhtmlをショートコードに変換する必要があるtinymceプラグインに取り組んでいます。

私はこのように見ているHTMLの文字列があります。

var content = '<div class="row"><div class="large-6 columns"><p>Content 1</p></div><div class="large-6 columns"><p>Content 2</p></div></div><p>Content between rows</p><div class="row"><div class="large-6 columns"><p>Content 3</p></div><div class="large-6 columns"><p>Content 4</p></div></div>'; 

と[行]コンテンツ[/行]にクラス行とdivを「変換」したい、とクラスの列を持つdiv要素にします[col] Content [/ col]。だから、すべての行は次のようにoutputtetされるだろう：htmlタグを置き換えるに開始する場所を知っている

'[row][col]<p>Content 1</p>[/col][col]<p>Content 2</p>[/col][/row]<p>Content between rows</p>[row][col]<p>Content 3</p>[/col][col]<p>Content 4</p>[/col][/row]' 

I have prepared a jsfiddleが、いけない：

は

[row] 
    [col]Content[/col] 
    [col]Content[/col] 
[/row] 

ので、交換後の私の最後の文字列は次のようになりますショートコードタグ付き。私はいくつかのjqueryの/ javascriptの天才は、この問題を解決する方法についての自分の考えを共有したいと願ってい

:)

Answer 1

これはjqueryのは、私の純粋なJavaScriptを使用して書くよりも数行を節約するという理由だけで、jqueryのソリューションです。

基本的に我々は

1. は、空のdiv要素を作成し、このdiv要素にあなたのhtmlを入れます。これにより、jqueryによって提供されるDOMのトラバーサルと操作APIを使用することができます。

2. すべての.columnsと.rowsに対して検索と更新を実行します。

私はCodepenで簡単な実行例を作成しました。 You can play with it。

HTML：

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> 
<p id="output"> 
</p> 

JS：

$(document).ready(function(){ 

    var content = '<div class="row"><div class="large-6 columns"><p>Content 1</p></div><div class="large-6 columns"><p>Content 2</p></div></div><p>Content between rows</p><div class="row"><div class="large-6 columns"><p>Content 3</p></div><div class="large-6 columns"><p>Content 4</p></div></div>'; 

    var $dataWrapper = $("<div>"); 
    $dataWrapper.html(content); //wrap up the data to convert in a div. 

    //for each column in container element 
    $dataWrapper.find('.columns').each(function(){ 
    var htmlInsideColumn = $(this).html(); 
    var convertedHtml = "[col]" + htmlInsideColumn + "[/col]"; 
    $(this).after(convertedHtml); //let's place the converted html right after this column element. 
    $(this).detach();       //remove this element. 
    }); 

    //for each row in container element 
    $dataWrapper.find('.row').each(function(){ 
    var htmlInsideColumn = $(this).html(); 
    var convertedHtml = "[row]" + htmlInsideColumn + "[/row]"; 
    $(this).after(convertedHtml); //let's place the converted html right after this row element. 
    $(this).detach();       //remove this element. 
    }); 

    $("#output").text($dataWrapper.html()); 


});