CODEWITHSUNDEEP
javascriptjqueryregexinternet-explorer
netiul
netiul

Reputation: 2769

regex replace not working in IE

Okay, I've update this question with improved code from the answers and comments below and more similar to the real project. But still it's not working in IE8. fiddle here

<ul id="definitions">
    <li id="defid63">keyword1<input type="hidden" value="63" /></li>
    <li id="defid61">keyword2<input type="hidden" value="61" /></li>
    <li id="defid62">Keyword3<input type="hidden" value="62" /></li>
</ul>

<div id="html">Lorem ipsum keyword1 dolor keyword2 sit keyword3 amet, consectetur adipisicing elit, sed do eiusmod tempor</div>

I've a list (ul > li) of keywords and there is a string with some text. I would like to wrap each occurrence of a keyword with an <a>-tag. I've code which works fine in firefox and chrome, but IE(8) doesn't match the regex somehow.

jQuery(function($) {

    // created by Gracenotes
    // http://goo.gl/MTkcY
    RegExp.quote = function(str) {
        return str.replace(/([.?*+^$[\]\\(){}-])/g, "\\$1");
    };

    var $node = $('#html'),
        // the dom element
        html = $node.html(); // the text we'll manipulate

    $('#definitions li').each(function() {
        var defid = $(this).find('input').val(),
            deftext = $(this).html().split("<input")[0],
            //the keyword
            //pattern = eval('/\\b('+RegExp.quote(deftext)+')\\b/gi');
            pattern = new RegExp('\\b(' + RegExp.quote(deftext) + ')\\b', 'gi');
        html = html.replace(pattern, '<a href="#id=' + defid + '">$1</a>');
    });

    // replace the dom content with our updated text
    $node.html(html);

});

Upvotes: 0

Views: 7340

Answers (3)

netiul
netiul

Reputation: 2769

Okay, the actual problem was lying inside the code which I didn't provide in the first version of my question. I used the code deftext = $(this).html().split("<input")[0], which doesn't work in IE8 because IE changes tags into uppercase characters. Browsers like FF and Chrome don't do that. So, using eval() to make an expression does work and wasn't really the problem: demo here http://jsfiddle.net/zluiten/79rhW/

Upvotes: 0

Kato
Kato

Reputation: 40582

This works in IE 8; test it in this fiddle.

Here's what I did:

  • replaced eval() with RegExp
  • escaped the reference text before using in regex
  • fudged an id since you didn't provide that code

Here is the code

jQuery(function($) {

    // created by Gracenotes
    // http://goo.gl/MTkcY
    RegExp.quote = function(str) {
       return str.replace(/([.?*+^$[\]\\(){}-])/g, "\\$1");
    };

    var $node = $('#html'),   // the dom element
        html  = $node.html(); // the text we'll manipulate

    $('#definitions li').each(function() {
        var $this   = $(this),
            //I didn't know where defid came from
            //so I just added it as id attribute
            defid   = $this.attr('id'), 
            deftext = $(this).text(), //the keyword
            pattern = new RegExp('\\b(' + RegExp.quote(deftext) + ')\\b', 'gi');
        html = html.replace(pattern, '<a href="#id=' + defid + '">$1</a>');
    });

    // replace the dom content with our updated text
    $node.html(html);

});

Upvotes: 1

Blazemonger
Blazemonger

Reputation: 92893

This should work:

var pattern = new RegExp('\b('+def+')\b','gi');

passing variable to a regexp in javascript

Upvotes: 2

Related Questions