#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2010
    Posts
    20
    Rep Power
    0

    Trying to Replace all HTML Block Elements from String Containing InnerHTML


    Hi All,

    I'm having problems trying to remove all HTML block elements from the innerHTML of an object. Any idea why this is not working? My RegEx should be replacing all open and close tag block elements (removing the entire tag with styles, class names, or anything within the <> tags) with nothing.

    I probably don't have the correct RegEx.

    Here's my code:

    Code:
               // Get HTML and Text from selection
                var ranges = selectedElem.getRanges();
                var el = new CKEDITOR.dom.element("div");
                for (var i = 0, len = ranges.length; i < len; ++i) {
                  el.append(ranges[i].cloneContents());
                }
                selectedElem = el.getHtml().toString();
                
                alert(selectedElem);
                // Replace block elements from html
                for(var i = 0; i < blockElems.length; i++){
                  var pattern = '(<' + blockElems[i] + '[^>]*>|<\/' + blockElems[i] + '>)';
                  var re = new RegExp(pattern, 'gi');
                  selectedElem.replace(re, '');
                }
    The above doesn't seem to work correctly. blockElems is an array with entries such as 'p', 'div', etc.

    Any help is appreciated.
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,153
    Rep Power
    183
    I am lost (with your code); here's mine:
    Code:
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <span id="mySpan">
    <div>I Was In A Division</div>
    <p>I Was In A Paragraph</p>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    </span>
    <script>
    var myContent = $("#mySpan").html().replace(/<[//]{0,1}(DIV|div|P|p|H1|h1|H2|h2|H3|h3|H4|h4|H5|h5)[^><]*>/g,"");
    $("#mySpan").html(myContent);
    </script>
    check it out and see how it works. Also, here is a list of standard block level elements (just thought this might be helpful): Block-level elements. The example above, is basic; you can adapt as needed. Also... sorry, I was not dissing your attempt to be glorious (in your code attempt); just could not understand what you had going on there. So I came up with a basic example of how to do this; and... that's what I have presented above.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2010
    Posts
    20
    Rep Power
    0
    Simple mistake in my code:

    Code:
    selectedElem.replace(re, '');
    To:

    Code:
    selectedElem = selectedElem.replace(re, '');
    Stupid mistake.... fail. Oh well. Of course you must reassign the replaced text back into the variable.

    Works like it is supposed to now!

    By the way, the array containing the block level elements contains:

    Code:
    // Build list of block elements to be replaced
    				  
    				  var blockElems=new Array();
              blockElems.push('address');
              blockElems.push('article'); 
              blockElems.push('aside'); 
              blockElems.push('audio'); 
              blockElems.push('blockquote'); 
              blockElems.push('canvas'); 
              blockElems.push('dd'); 
              blockElems.push('div'); 
              blockElems.push('dl'); 
              blockElems.push('fieldset'); 
              blockElems.push('figcaption'); 
              blockElems.push('figure'); 
              blockElems.push('figcaption'); 
              blockElems.push('footer'); 
              blockElems.push('form'); 
              blockElems.push('h1'); 
              blockElems.push('h2');
              blockElems.push('h3');
              blockElems.push('h4');
              blockElems.push('h5');
              blockElems.push('h6');
              blockElems.push('header');
              blockElems.push('hgroup');
              blockElems.push('hr');
              blockElems.push('noscript');
              blockElems.push('ol');
              blockElems.push('output');
              blockElems.push('p');
              blockElems.push('pre');
              blockElems.push('section');
              blockElems.push('table');
              blockElems.push('tfoot');
              blockElems.push('ul');
              blockElems.push('video');

IMN logo majestic logo threadwatch logo seochat tools logo