regex replace not working in IE

Question

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
    // https://stackoverflow.com/a/494122
    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);

});

What happens with var pattern = new RegExp('\\b(' + def + ')\\b', 'gi'); ? Using "eval()" seems icky. — Pointy
– Pointy, Commented Nov 8, 2011 at 16:05
You'd still be ahead to avoid eval()--not that special ops teams will descend through your ceiling and steal your keyboard or anything; but RegExp is the right tool for the job :) — Kato
– Kato, Commented Nov 9, 2011 at 16:30

Community · Accepted Answer · 2017-05-23 11:47:59Z

2

This should work:

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

passing variable to a regexp in javascript

edited May 23, 2017 at 11:47

CommunityBot

11 silver badge

answered Nov 8, 2011 at 16:11

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Dan Over a year ago

Pretty sure you don't want the slashes when calling new RegExp on a string.

Kato Over a year ago

hm, I tested it in fiddle with \\b and it works like a charm; what gives?

Dan Over a year ago

@Kato if you mean my comment, I was referring to the fact that mblase75's answer originally included forward slashes as for a RegExp literal, I wasn't addressing the question of number of backslashes in a string literal :)

Kato Over a year ago

@Dan aaaaaaaaaah :) So I wonder if \b works as opposed to \\b (runs of to fiddle)

netiul Over a year ago

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 jsfiddle.net/zluiten/79rhW

Kato · Accepted Answer · 2011-11-08 16:43:22Z

1

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
    // https://stackoverflow.com/a/494122
    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);

});

edited Nov 8, 2011 at 16:43

answered Nov 8, 2011 at 16:38

Kato

40.6k6 gold badges124 silver badges149 bronze badges

1 Comment

netiul Over a year ago

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 jsfiddle.net/zluiten/79rhW

netiul · Accepted Answer · 2014-07-03 09:37:43Z

0

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/

answered Jul 3, 2014 at 9:37

netiul

2,7692 gold badges26 silver badges29 bronze badges

Collectives™ on Stack Overflow

regex replace not working in IE

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related