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

Solution 1:

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

basically we'll

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


});

Solution 2:

@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.

Baca Juga

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

JavaScript Square

Jquery - Replace Selected Html Tags In String With Value

Solution 1:

Solution 2:

Post a Comment for "Jquery - Replace Selected Html Tags In String With Value"