在忽略链接和html标签的同时替换内容

Question

I'm replacing the smiley shortcuts from my text editor with img tags, but the logic I use also sees parts of links and tags as smiley shortcuts (eg :/ in http:// , or :p in cursor:pointer in the style attribute)

How can I ignore all the links and html tags while replacing smiley shortcuts with images?

for(var key in shortcuts){
    // Check if the editor html contains the looped shortcut
    if(content.toLowerCase().indexOf(key) != -1){
        // Escaping special characters to be able to use the shortcuts in regular expression
        var k = key.replace(/[<>*()?']/g, "\\$&");

        // Make shortcuts case insensitive
        var regex = new RegExp(k, "ig");

        //Replace shortcuts with img tags (smileys)
        tinymce.activeEditor.setContent(content.replace(regex,'<img src="images/transparent.png" class="smiley_icon '+ shortcuts[key] +'">'));
    }
}

Answer 1

Description

I think the way I'd approach this is to match everything bad along with everything good. Then in the expression only put into the capture group the text glyphs I was interested in. Later in the programming logic I'd test each match to see if capture group 1 was populated, if so then the match .index will show where in the string that match occurred.

This expression will find all the :/ , :) , :p , tags and urls, but capture group 1 will only contain the :) , :/ , or :p which are not part of a tag or url.

https?:\\/\\/[^\\s]*|<\\/?\\w+\\b(?=\\s|>)(?:='[^']*'|="[^"]*"|=[^'"][^\\s>]*|[^>])*>|(:\\)|:P|:\\/)

Expanded

• https?:\\/\\/[^\\s]* matches a url in plain text
• | or
• <\\/?\\w+\\b(?=\\s|>)(?:='[^']*'|="[^"]*"|=[^'"][^\\s>]*|[^>])*> matches any open or close html tags
• | or
• (:\\)|:P|:\\/) capture group 1 will get the desired text glyphs

Example:

Live example: http://regexr.com?35cv9 (Hover over the blue matches to see each of of the capture groups and index)

Sample Text

<a href=http://i.like.kittens style="cursor:point"> :) I had a :/ great time :p </a> check out http://some.url.com

matches

[0] => Array
    (
        [0] => <a href=http://i.like.kittens style="cursor:point">
        [1] => :)
        [2] => :/
        [3] => :p
        [4] => </a>
        [5] => http://some.url.com
    )

[1] => Array
    (
        [0] => 
        [1] => :)
        [2] => :/
        [3] => :p
        [4] => 
        [5] => 
    )