jQuery/Javascript: More complex Searching and Replacing in an HTML document

Question

I have done some stuff in jQuery and Javascript before, but unfortunately I am no expert. I couldn't find any hints on how to accomplish my task with using as few resources as possible. You guys can probably help me out:

Here is what I want to do:

I want to find (using regex) all BB-code-like elements on a page that look something like this:

[ndex here=parameter randomdata]

I want to then replace each of them with the contents I receive from an ajax-call that looks like this:

call.php?ndex=here=parameter randomdata

or whatever parameters I pick up from within the according [ndex]-tag.

Here is my solution/thought-process so far:

$(document).ready(function() {
    var pattern = /\[ndex\s+(.*?)\]/mg;
    var documentText = $(document.body).text();
    var matches = documentText.match(pattern);

    $('*').each(function () { 
        var searchText = this;
        if ($(searchText).children().length == 0) { 
            $.each(matches, function() {
                //here is where I would need to check for a match and make a call 
                }
            }); 
        } 
    });
});

I don't really know how to work from here. My sketch seems really clunky and complicated. There must be a more elegant and straight-forward solution.

Thank you guys so much for your help. :)

I'm not sure this is the way to accomplish what you want. You should be replacing the text server-side, not via ajax calls — Pablo Mescher
– Pablo Mescher, Commented Jun 30, 2012 at 16:27
Thanks for your reply. I need to make ajax-calls because the document that is having replacements isn't necessarily running on a server with php. — Macks
– Macks, Commented Jun 30, 2012 at 16:37

arw · Accepted Answer · 2012-06-30 17:29:53Z

i would do something like this :

function ndex_treat(n) {
  // If element is ELEMENT_NODE
  if(n.nodeType==1)
  {
    // If element node has child, we pass them to function ndex_treat
    if(n.hasChildNodes())
      for(var i= 0; i<n.childNodes.length; i++)
        ndex_treat(n.childNodes[i]);
  }
  // If element is TEXT_NODE we replace [ndex ...]
  else if(n.nodeType==3)
  {
    var matches, elemNdex, elemText;
    // While there is one
    while(/\[ndex\s+(.*?)\]/m.test(n.nodeValue))
    {
      // Taking what's before (matches[1]), the "attribute" (matches[2]) and what's after (matches[3])
      matches= n.nodeValue.match(/^([\s\S]*?)\[ndex\s+(.*?)\]([\s\S]*)$/m)
      // Creating a node <span class="ndex-to-replace" title="..."></span> and inserting it before current text node element
      elemNdex= document.createElement("span");
      elemNdex.className= 'ndex-to-replace';
      elemNdex.title= matches[2];
      n.parentNode.insertBefore(elemNdex, n);
      // If there was text before [ndex ...] we add it as a node before
      if(matches[1]!=="")
      {
        elemText = document.createTextNode(matches[1]);
        elemNdex.parentNode.insertBefore(elemText, elemNdex);
      }
      // We replace content of current node with what was after [ndex ...]
      n.nodeValue=matches[3];
    }
  }
}

$(function(){
  // Get the elements we want to scan ( being sharper would be better )
  $('body').each(function(){
    // Passing them to function ndex_treat
    ndex_treat(this);        
  });

  // Make the ajax calls
  $('.ndex-to-replace').each(function(){
    // Don't know if necessary
    var current= this;
    $.get('call.php?ndex='+encodeURIComponent(this.title),function(data){
      $(current).replaceWith(data);
    });
  });
});

i replaced by node rather than by jquery because i find it rather bad to work on textNode with jquery. if you don't care and would rather do the barbarian way, you could replace all the first part with simply :

$(function(){
  // Get the elements we want to scan ( being sharper would be better )
  $('body').each(function(){
    // With no " in argument of [ndex ...]
    $(this).html( $(this).html().replace(/\[ndex\s+([^"]*?)\]/mg,'<span class="ndex-to-replace" title="$1"></span>') );
    // With no ' in argument of [ndex ...]
    //$(this).html( $(this).html().replace(/\[ndex\s+([^']*?)\]/mg,'<span class="ndex-to-replace" title='$1'></span>') );
  });

  // Make the ajax calls
  /* ... */
});

Thank you very much. You've given an answer that works with copy+paste. That's awesome! :) I will however still try to work with the solution suggested by Pablo. Until I've got that running, I'll just use your solution. You have helped me understand the way search/replace works in Javascript much better, thank you for your help!

Pablo Mescher · Accepted Answer · 2012-06-30 16:57:06Z

1

My advice is to keep the ajax calls to a minimum. Do the search in the first place, an on another round replace every object with the corresponding data.

$(document).ready(function() {
var pattern = /\[ndex\s+(.*?)\]/mg;
var documentText = $(document.body).text();
var matches = documentText.match(pattern);


$.ajax({ 
       url:'call.php',
       method:'POST',
       data: matches,
       success: function(data){
          //replace every matched element with the corresponding data
       });


});

You'll have to modify your call.php to take this into account though, but you are saving lots of calls to the server and thus time

answered Jun 30, 2012 at 16:57

Pablo Mescher

27.7k6 gold badges32 silver badges33 bronze badges

2 Comments

Macks Over a year ago

Thank you! This is great! I'm kind of worried about passing javascript-objects to a php-file, but I'm pretty sure I'll find out how to operate that. My actual question, however, is: I need to replace the bb-code with html-code (that is generated by my php-file) and I'm not sure how to go about replacing text from the document with corresponding html-code that is derived from an object (?). Any tips?

arw Over a year ago

you can just do data:{ndex:matches} you will have access to it as $_POST['ndex'] an array in the php page, as for replacement either by dom node or innerHTML ( or equivalent jquery html() )

Collectives™ on Stack Overflow

jQuery/Javascript: More complex Searching and Replacing in an HTML document

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related