SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)

    Smart search and replace with Regex

    Hello,

    I'm still working on the rich text editor. I am creating fake named anchors that are simply images with a class of 'namedAnchor' because they are simpler to manipulate within the editor and contain any text nodes. When the form holding the editor is submitted I want to replace these fake anchors with the real thing. I managed to get this to work ok using DOM on the iframe's window.
    Code javascript:
    // DOM on iframe's window
    var images = this.contentWindow.document.getElementsByTagName('img');
    for(var i =0; i<images.length; i++) {
    	var img = images[i];
    	if (img.className == 'namedAnchor')
    		Element.replace(img, '<a name="'+img.alt+'"></a>');
    }
    Though I was interested in trying a regex alternative on the source code itself, this is as far as I managed to get with it..
    Code javascript:
    // Regex - check for <img{*}title="{*}"{*}class="namedAnchor"{*}>
    var namedAnchorExp = /(<img)(\w+)(title="(\w+)")(class="namedAnchor")(\w+)(>)/g
    var result;
    while (result = namedAnchorExp.exec(this.textarea.value)) {
    	for (var i=0; i<result.length; i++) {
    		alert(result[i]);
    	}
    }
    I want the regex to match all occurrences of <img{*}title="{titleName}"{*}class="namedAnchor"{*}> where {*} is any number of characters, and replace it with <a name="{titleName}"></a>.

    So once again I call on the js masters for assistance.

    Thanks,

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Code:
    /(<img)(\w+)(title="(\w+)")(class="namedAnchor")(\w+)(>)/g
    That could never work because it isn't taking spaces into account. \w won't match spaces. Try this:
    Code:
    /(<img[\w\s=".]+title="\w+"[\w\s=".]+class="namedAnchor"[\w\s=".]*>)/g
    You have to take into account that something like src="image.gif" could be before or after any of the attributes, but that the "class" one might be the last one (hence the use of * instead of +). This also means that you know that anything else in the tag (such as the src value) will only contain \w characters: [A-Za-z0-9_].

    You could trim it down more by getting rid of the "title" bit in the expression, unless you're specifically searching for tags that contain that attribute.

    Using the DOM seems neater to me than applying a regex to the source/innerHTML. Not sure if it's faster, as javascript/DOM interaction is not particularly fast.

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Thanks Raffles, i'll give that a shot.

    Oh, and I am checking the title exists so I can put it into the name attribute of the anchor.


    Thanks,


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •