2

我想替换由em和u标签包裹的 HTML 文本。

例如：

<div id='test'>
This is the test and <em> <u> texts here will need to be replaced </u></em> to a link.
</div>

我要使每一个字'texts here will need to be replaced' linkable。所以在我的情况下，它有服务器<a>标签。

我的代码是

var texts = $('#test');
        texts.find('em u').each(function(){
        var text = $(this).html();
        $(this).replaceWith("<a href='#' class='link' onclick='return false;'>" + text + "</a>");
    })

我的代码有两个问题。我似乎无法“找到”<em><u>标签下的文本。如果我改变find('u')它的工作原理。

2.我希望我的结果有 7 个标签，所以'texts' 'here' 'will' 'need' 'to' 'be' 'replaced'可以链接。我的代码只为 7 个单词创建 1 个链接。

有人可以帮我吗？

4

4 回答 4

2

我建议：

$('#test u').html(function(){
    var words = $(this).text().split(/\s+/);
    for (var i = 0, len = words.length; i<len; i++){
        if (words[i].length) {
            words[i] = '<a href="#">' + words[i] + '</a>';
        }
    }
    return words.join(' ');
});

JS 小提琴演示。

而且，如果您想删除该u元素，只需使用unwrap()：

$('#test u').html(function(){
    var words = $(this).text().split(/\s+/);
    for (var i = 0, len = words.length; i<len; i++){
        if (words[i].length) {
            words[i] = '<a href="#">' + words[i] + '</a>';
        }
    }
    return words.join(' ');
}).find('a').unwrap();

JS 小提琴演示。

要同时删除 theu和em元素（无论它们嵌套在每个元素中），以下工作，但感觉很混乱，坦率地说，将从有序/结构正确的 HTML 中受益匪浅：

$('#test u > em, #test em > u').html(function () {
    var words = $(this).text().split(/\s+/);
    for (var i = 0, len = words.length; i < len; i++) {
        if (words[i].length) {
            words[i] = '<a href="#">' + words[i] + '</a>';
        }
    }
    return words.join(' ');
}).find('a').unwrap().unwrap();

JS 小提琴演示。

参考：

于 2013-08-05T17:34:22.673 回答
1 
var texts = $('#test');

texts.find('em u').each(function () {
    var words = $(this).html().split(' ');
    var output = '';
    for (var i = 0; i < words.length; i++) {
        var link = words[i]; // Change this to whatever
        output += '<a href="' + link + '" class="link" onclick="return false;">' + words[i] + '</a> ';
    }
    $(this).html(output);
});

jsFiddle 示例在这里

于 2013-08-05T17:40:51.163 回答
1

使用正则表达式

$('#test em u').each(function(){
    var $this = $(this); 
    var html = $this.html().replace(/\s?(\w+)\s?/g, "<a href='#'>$1</a>");
    $this.html(html);
});

演示

于 2013-08-05T17:40:58.037 回答
0

尝试

jQuery(function($){
    var texts = $('#test');
    texts.find('em > u').html(function(idx, html){
        return html.replace(/(\w+)/g, '<a href="#" class="link" onclick="return false;">$1</a>')
    })
})

演示：小提琴

于 2013-08-05T17:33:15.057 回答