1

好的，我很难理解rejex 以及它是如何工作的，我尝试为一个网站做一个基本的词典/词汇表，我已经花太多时间在上面了。

那里有我的代码：

// MY MULTIPLE ARRAY
var myDictionnary = new Object();
myDictionnary.myDefinition = new Array();

myDictionnary.myDefinition.push({'term':"*1", 'definition':"My description here"});
myDictionnary.myDefinition.push({'term':"word", 'definition':"My description here"});
myDictionnary.myDefinition.push({'term':"my dog doesn't move", 'definition':"My description here"});

// MY FUNCTION
$.each(myDictionnary.myDefinition, function(){
    var myContent = $('#content_right').html();
    var myTerm = this.term;
    var myRegTerm = new RegExp(myTerm,'g');

    $('#content_right').html(myContent.replace(myRegTerm,'<span class="tooltip" title="'+this.definition+'"> *'+this.term+'</span>'));
});

我创建了我的数组，并为每个结果在我的 div#content_right 中搜索相同的内容，并将其替换为带有标题和工具提示的 span。我把我的正则表达式空了，以免与我之前尝试过的混淆。

在我的数组“术语”中，您可以看到我将研究什么样的文本。它适用于搜索“单词”等普通文本。

但是对于像'asterix'这样的正则表达式它有错误，当我找到一种方法来超越它时，他将它添加到文本中，我尝试了很多方法来解释我的'asterix'就像一个正常的字符但它不起作用。

我想要的是：无论我的 var 'myTerm' 中的文本如何，都可以从字面上解释变量。这可能吗？如果不是，我应该使用哪种解决方案。

提前感谢，PS 对不起我的英语不好...（我是法语）亚历克斯

4

2 回答 2

1

*是正则表达式中的特殊字符，意思是“前一个字符的 0 个或多个”。因为它是第一个字符，所以它是无效的，你会得到一个错误。

考虑preg_quote从 PHPJS实现以转义此类特殊字符并使它们在正则表达式中有效。

但是，您这样做的方式非常糟糕。不仅因为你使用innerHTML了多次，而且因为如果你遇到这样的事情怎么办？

Blah blah blah <img src="blah/word/blah.png" />

您的结果输出将是：

Blah blah blah <img src="blah/<span class="tooltip" title="My description here"> *word</span>/blah.png" />

做你正在尝试的唯一真正的方法是专门扫描文本节点，然后.splitText()在文本节点上使用以提取单词匹配，然后将其放入自己的<span>标签中。

这是上述解释的示例实现：

function definitions(rootnode) {
    if( !rootnode) rootnode = document.body;
    var dictionary = [
        {"term":"*1", "definition":"My description here"},
        {"term":"word", "definition":"My description here"},
        {"term":"my dog doesn't move", "definition":"My description here"}
    ], dl = dictionary.length, recurse = function(node) {
        var c = node.childNodes, cl = c.length, i, j, s, io;
        for( i=0; i<cl; i++) {
            if( c[i].nodeType == 1) { // ELEMENT NODE
                if( c[i].className.match(/\btooltip\b/)) continue;
                // ^ Exclude elements that are already tooltips
                recurse(c[i]);
                continue;
            }
            if( c[i].nodeType == 3) { // TEXT NODE
                for( j=0; j<dl; j++) {
                    if( (io = c[i].nodeValue.indexOf(dictionary[j].term)) > -1) {
                        c[i].splitText(io+dictionary[j].term.length);
                        c[i].splitText(io);
                        cl += 2; // we created two new nodes
                        i++; // go to next sibling, the matched word
                        s = document.createElement('span');
                        s.className = "tooltip";
                        s.title = dictionary[j].definition;
                        node.insertBefore(s,c[i]);
                        i++;
                        s.appendChild(c[i]); // place the text node inside the span
                        // Note that now when i++ it will point to the tail,
                        // so multiple matches in the same node are possible.
                    }
                }
            }
        }
    };
    recurse(rootnode);
}

现在您可以调用definitions()替换文档中的所有匹配项，或者definitions(document.getElementById("myelement"))仅替换某个容器中的匹配项。

于 2013-02-28T18:04:27.103 回答
0

通过添加另一个变量，它将解决问题：

            for( j=0; j<dl; j++) {
                  debutI =i;
                  if((io =c[i].nodeValue.indexOf(dictionary[j].term)) != -1) {
                        c[i].splitText(io+dictionary[j].term.length);
                        c[i].splitText(io);
                        cl += 2; // we created two new nodes
                        i++; // go to next sibling, the matched word
                        s = document.createElement('span');
                        s.className = "tooltip";
                        s.title = dictionary[j].definition;
                        node.insertBefore(s,c[i]);
                        i++;
                        s.appendChild(c[i]); // place the text node inside the span
                        // Note that now when i++ it will point to the tail,
                        // so multiple matches in the same node are possible.
                    }
                    i = debutI;
                }

Comme ça, on n'aura pas à metre tous les spans partout dans le site à la main。> _ >

于 2013-05-23T01:29:35.680 回答