jQuery-用值替換字符串中的選定html標簽

Question

我正在研究tinymce插件，需要在其中將一些html轉換為簡碼。

我有一個帶有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“轉換”為[row] Content [/ row]，並將具有類列的div“轉換”為[col] Content [/ col]。 這樣每一行都會輸出如下：

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

因此，替換后的最終字符串將如下所示：

'[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]'

我已經准備了一個jsfiddle ，但是不知道從哪里開始用shortcode標簽替換html標簽。

我希望一些jquery / javascript天才想分享他們對如何解決這個問題的想法：）

Answer 1

這是一個jquery解決方案，因為與使用純JavaScript相比，jquery為我節省了幾行。

基本上我們會

1. 創建一個空的div元素，然后將您的html放入該div中。 這使我可以使用jquery提供的DOM遍歷和操作api。

2. 執行搜索並更新所有.columns和.rows。

我在Codepen上做了一個簡單的運行示例。 你可以玩 。

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


});

Answer 2

@Ji_in_coding非常好！ 我需要這樣的內容來引用自定義構建論壇上具有豐富文本編輯器（例如CkEditor）的帖子，但也不想復制圖像和媒體，否則引用會變得太大。

所以我有一個html變量，我想用文本替換HTML標記。

我用它制作了一個jQuery函數：

     /**
     * Replace an HTML tag in a string with a text
     *
     * @param {string} content
     * @param {string} tag
     * @param {string} replaceText
     *
     * @return {string}
     */
    replaceTagWithText: function (content, tag, replaceText) {
        var $dataWrapper = $('<div>');
        $dataWrapper.html(content);   //wrap up the data to convert in a div.

        $dataWrapper.find(tag).each(function(){
            var convertedHtml = '<br/>' + replaceText;
            $(this).after(convertedHtml); //let's place the converted html right after this element.
            $(this).detach(); //remove this element.
        });

        return $dataWrapper.html();
    }

用法：

quoteContent = replaceTagWithText(quoteContent, 'img', '* image *');
quoteContent = replaceTagWithText(quoteContent, 'iframe', '* media *');