Jquery - Replace selected html tags in string with value

Question

I'm working on a tinymce plugin where I need to convert some html into shortcodes.

I have a string with html looking like this:

 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>';

and want to "convert" the divs with the class row into [row]Content[/row], and divs with the class columns into [col]Content[/col]. So a every row would be outputtet like this:

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

So my final string after the replacement will look something like this:

'[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 , but dont know where to start on replacing the html tags with shortcode tags.

I'm hoping that some jquery/javascript geniuses want to share their thoughts on how to solve this :)

Answer 1

This is a jquery solution, just because jquery saves me a couple lines than writing using pure javascript.

basically we'll

1. create a empty div element, and put your html into this div. this allows me to use DOM traversal and manipulation api provided by jquery.

2. perform search and update on all .columns and .rows.

I have made a simple running example on 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());


});

Answer 2

@Ji_in_coding very nice! I needed something like this to quote a post on a custom build forum with a rich texteditor (eg CkEditor), but don't wanna copy the images and media too, else the quote gets so large.

So I have a var with html and I want to replace an HTML tag with a text.

I made a jQuery function out of it:

     /**
     * 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();
    }

Usage:

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