正则表达式替换在 IE 中不起作用答案

【问题标题】：regex replace not working in IE正则表达式替换在 IE 中不起作用
【发布时间】：2011-11-08 16:04:14
【问题描述】：

好的，我已经用下面的答案和 cmets 的改进代码更新了这个问题，并且更类似于实际项目。但它仍然不能在 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>

我有一个关键字列表 (ul > li)，并且有一个带有一些文本的字符串。我想用<a>-tag 包装每次出现的关键字。我的代码在 Firefox 和 chrome 中运行良好，但 IE(8) 与正则表达式不匹配。

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

});

【问题讨论】：

var pattern = new RegExp('\\b(' + def + ')\\b', 'gi'); 会发生什么？使用“eval()”似乎很恶心。
你仍然可以避免 eval() ——并不是说特殊的操作团队会从你的天花板下降并偷走你的键盘或任何东西；但 RegExp 是适合这项工作的工具 :)
你说的很对，我不会再这样做了；）

标签： javascript jquery regex internet-explorer

【解决方案1】：

这应该可行：

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

passing variable to a regexp in javascript

【讨论】：

在字符串上调用 new RegExp 时，您肯定不希望使用斜线。
嗯，我用 \\b 测试了它，它就像一个魅力；什么给了？
@Kato 如果你的意思是我的评论，我指的是 mblase75 的答案最初包括正斜杠作为正则表达式文字的事实，我没有解决 字符串字面量:)
@Dan aaaaaaaaaah :) 所以我想知道 \b 是否有效，而不是 \\b （运行到小提琴）
好的，实际问题出在我在问题的第一个版本中没有提供的代码中。我使用了代码deftext = $(this).html().split("<input")[0],，它在 IE8 中不起作用，因为 IE 将标签更改为大写字符。 FF 和 Chrome 等浏览器不这样做。因此，使用 eval() 来制作表达式确实有效，并不是真正的问题：demo here jsfiddle.net/zluiten/79rhW

【解决方案2】：

这适用于 IE 8； test it in this fiddle。

这就是我所做的：

用正则表达式替换了 eval()
在正则表达式中使用之前转义了参考文本
捏造了一个 ID，因为您没有提供该代码

这里是代码

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

});

【讨论】：

好的，实际问题出在我在问题的第一个版本中没有提供的代码中。我使用了代码deftext = $(this).html().split("<input")[0],，它在 IE8 中不起作用，因为 IE 将标签更改为大写字符。 FF 和 Chrome 等浏览器不这样做。因此，使用 eval() 来制作表达式确实有效，并不是真正的问题：demo here jsfiddle.net/zluiten/79rhW

【解决方案3】：

好的，实际问题出在我在问题的第一个版本中没有提供的代码中。我使用了代码deftext = $(this).html().split("<input")[0]，它在 IE8 中不起作用，因为 IE 将标签更改为大写字符。 FF 和 Chrome 等浏览器不这样做。因此，使用 eval() 来制作表达式确实有效，并不是真正的问题：demo here http://jsfiddle.net/zluiten/79rhW/

【讨论】：