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
    // 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);

});

What happens with `var pattern = new RegExp('\\b(' + def + ')\\b', 'gi');` ? Using "eval()" seems icky. — Pointy, Nov 08 '11 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, Nov 09 '11 at 16:30

score 2 · Answer 1 · edited May 23 '17 at 11:47

2

This should work:

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

passing variable to a regexp in javascript

edited May 23 '17 at 11:47

Community

1
1

answered Nov 08 '11 at 16:11

Blazemonger

90,923
26
142
180

1

Pretty sure you don't want the slashes when calling `new RegExp` on a string. – Dan Nov 08 '11 at 16:14
hm, I tested it in fiddle with \\b and it works like a charm; what gives? – Kato Nov 08 '11 at 16:42
@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 :) – Dan Nov 08 '11 at 21:16
@Dan aaaaaaaaaah :) So I wonder if \b works as opposed to \\b (runs of to fiddle) – Kato Nov 08 '11 at 23:07
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(" – netiul Nov 09 '11 at 09:05

Kato · Answer 2 · 2011-11-08T16:43:22.710

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);

});

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(" — netiul, Nov 09 '11 at 09:06

score 0 · Accepted Answer · answered Jul 03 '14 at 09:37

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/

regex replace not working in IE

3 Answers3