CODEWITHSUNDEEP
javascriptjqueryreplace
lassemt
lassemt

Reputation: 156

Jquery - Replace selected html tags in string with value

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 :)

Upvotes: 1

Views: 2058

Answers (2)

Jacco van der Post
Jacco van der Post

Reputation: 618

@Ji_in_coding very nice! I needed something like this to quote a post on a custom build forum with a rich texteditor (e.g. 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 *');

Upvotes: 0

Ji_in_coding
Ji_in_coding

Reputation: 1701

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


});

Upvotes: 2

Related Questions