代码之家 › 专栏 › 技术社区 › PandaWood

有没有更好的方法可以使用jquery将元素插入到文本中?

jquery

PandaWood · 技术社区 · 16 年前

我写了一些jquery来解决这个问题。尽管它很有效,但我还是忍不住认为我的jquery很糟糕,我希望有人能告诉我我遗漏了一些东西,并更正我的代码以使用更棒的东西。尤其是我正在做的串状浓缩物(被评论为“呕吐物”)是跛脚的。有人能把它解锁吗?

问题是采用下面的HTML,将大括号中的文本gl_¼kliche替换为稍微向下的定位点,并将定位点的文本替换为大括号中的单词from。这需要做一般(即不是硬编码)因为有许多。

我发现以这种特殊的方式在文本中插入锚,在任何jquery方法中都不适合——希望我错了。

给定HTML

<tr>
    <td class="german">bin ich eine {glÃ¼ckliche} Fliege</td>
    <td class="english">am I a happy fly</td>
    <td>
        <div class="lessonLink">
            <a href="http://www.german.org/happy" title="happy">&gt;&gt;</a>
        </div>
    </td>
</tr>

期望的HTML

<tr>
    <td class="german">bin ich eine <a href="http://www.german.org/happy" title="happy">glÃ¼ckliche</a> Fliege</td>
    <td class="english">am I a happy fly</td>
    <td>
        <div class="lessonLink">
            <a href="http://www.german.org/happy" title="happy">&gt;&gt;</a>
        </div>
    </td>
</tr>

jQuery

$(function() {
    $('td.german').each(function() {

        var sentence = $(this).text();

        //get the squigglied text
        var startBrace = sentence.indexOf('{');
        var endBrace = sentence.indexOf('}');
        if (startBrace === -1 || endBrace === -1) return;
        var toReplace = sentence.slice(startBrace, endBrace+1);

        // find the anchor and replace it's text with squigglied
        var $newAnchor = $(this).siblings().find('a').first().clone();
        $newAnchor.text(toReplace.slice(1, toReplace.length-1));

        //take the new anchor and insert it into the main sentence
        // can I get full-string from DOM object? string concat looks vomit
        var stringToInsert = '<a href="' + $newAnchor[0].href + '" ' +
                             'title="' + $newAnchor[0].title + '" >' +
                              $newAnchor[0].text + '</a>';

        var newSentence = sentence.replace(toReplace, stringToInsert);
        $(this).html(newSentence);
    });
});

1 回复 | 直到 16 年前

tvanfosson 16 年前

把大括号里的东西换成 span ,然后将HTML设置为替换文本,并简单地将现有链接复制到范围中?我认为您需要引用大括号,因为它们在正则表达式中是特殊的——不过,对于javascript来说,在这方面我可能是错的。如果是,请告诉我,我会更新。注意使用 closest 和 find 具有 first 获取当前表元素所在行中的第一个链接。

$(function() {
    $('td.german').each(function() {
        var link = $(this).closest('tr').find('a:first').clone();
        var re = new RegExp( '\{.*\}' );
        var sentence = $(this).text();
        var word =  sentence.match(re)[0];
        word = word.substr(1,word.length-2);
        link.text(word);
        sentence = sentence.replace(re,'<span></span>');
        $(this).html(sentence).find('span').append(link);
    });
});

如果你的链接文本已经包含了这个词,那就简单多了。

$(function() {
    $('td.german').each(function() {
        var link = $(this).closest('tr').find('a:first').clone();
        var sentence = $(this).text().replace(re,'<span></span>');
        $(this).html(sentence).find('span').append(link);
    });
});