Question

我写了一些jquery来解决这个问题。虽然它有效但我不禁认为我的jquery很可怕＆amp;我希望有人可以告诉我，我错过了一些东西并更正了我的代码以使用更棒的东西。特别是我正在做的字符串连接（评论为“呕吐”）是蹩脚的。有人可以解开它吗？

问题是采用下面的HTML并用稍微向下的锚替换大括号{glückliche}中的文本，并用大括号中的单词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);
    });
});

Answer 1

如何用span替换大括号内的任何内容，然后将html设置为替换文本，只需将现有链接复制到span中？我认为你需要引用大括号，因为它们在正则表达式中是特殊的 - 尽管如此，我可能在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);
    });
});

有没有更好的方法使用Jquery将我的元素插入到文本中？

1 个答案: