Question

我的评论平台类型的用户在<em class="title">标签中突出显示（电影，书籍等）标题。例如，它可能是：

<em class="title">Pacific Rim</em>

使用jQuery，我想抓取这个em类中的内容并将其添加到超链接中。为了澄清，使用jQuery，我想得到这个结果：

<em class="title"><a href="http://domain.com/?=Pacific+Rim">Pacific Rim</a></em>

在考虑性能时，如何在最佳实践中执行此操作。这是一个非常流量的平台。

Answer 1

试试这个：

var ems = document.querySelectorAll("em.title");

for (var i = 0; i < ems.length; ++i) {
    if (ems[i].querySelector("a") === null) {
        var em = ems[i],
            text = jQuery(em).text();   
        var before = text[0] == " ";
        var after = text[text.length-1] == " ";
        text = text.trim();
        while (em.nextSibling && em.nextSibling.className && em.nextSibling.className.indexOf("title") != -1) {
            var tmp = em;
            em = em.nextSibling;
            tmp.parentNode.removeChild(tmp);
            text += jQuery(em).text().trim();
            ++i;
        }
        var link = text.replace(/[^a-z \-\d']+/gi, "").replace(/\s+/g, "+");
        var innerHTML = "<a target=\"_blank\" href=\"http://domain.com/?=" + link + "\">" + text + "</a>";
        innerHTML = before ? " " + innerHTML: innerHTML;
        innerHTML = after ? innerHTML + " " : innerHTML;
        ems[i].innerHTML = innerHTML;
    }
}

这是fiddle

更新：http://jsfiddle.net/1t5efadk/14/

决赛：http://jsfiddle.net/186hwg04/8/

Answer 2

$("em.title").each(function() {
    var content = $(this).text();
    var parameter_string = content.replace(/ /g, "+").trim();
    parameter_string = encodeURIComponent(parameter_string);
    var new_content = '<a href="http://domain.com/?s=' + parameter_string + '">' + content + '</a>';
    $(this).html(new_content);
});

如果您想删除任何类型的标点符号，请参阅this other question。

Answer 3

＆＃13;

$('em.title').html(function(i,html) {
  return $('<a/>',{href:'http://domain.com/?='+html.trim().replace(/\s/g,'+'),text:html});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<em class="title">Pacific Rim</em>

＆＃13;

更新1

以下更新版本将执行以下操作：

抓取em元素
结合下一个元素的内容，如果em并删除该元素
使用以下属性从此创建查询字符串参数
- 删除字符,.&
- 删除html
将查询参数附加到预定的URL，并使用新URL将未修改的内容包装在e元素中。

DEMO

$('em.title:not(:has(a))').html(function() {
    $(this).append( $(this).next('em').html() ).next('em').remove();
    var text = $(this).text().trim().replace(/[\.,&]/g,'');
    return $('<a/>',{href:'http://domain.com/?par='+encodeURIComponent(text),html:$(this).html()});
});

或DEMO

$('em.title:not(:has(a))').html(function() {
    $(this).append( $(this).next('em').html() ).next('em').remove();
    var text = $(this).text().trim().replace(/[\.,&]/g,'').replace(/\s/g,'+');
    return $('<a/>',{href:'http://domain.com/?par='+text,html:$(this).html()});
});

更新2

根据评论，上述版本有两个问题：

合并可能由文本节点分隔的两个元素。
处理包含在em元素中的a元素。

以下版本解决了这两个问题：

DEMO

$('em.title:not(:has(a))').filter(function() { 
    return !$(this).parent().is('a'); 
}).html(function() {
    var nextNode = this.nextSibling;
    nextNode && nextNode.nodeType != 3 && 
        $(this).append( $(this).next('em').html() ).next('em').remove();
    var text = $(this).text().trim().replace(/[\.,&]/g,'').replace(/\s/g,'+');
    return $('<a/>',{href:'http://domain.com/?par='+text,html:$(this).html()});
});

Answer 4

实际上，如果您只是想在em.title上添加点击事件，我建议你这样使用：

$("em.title").click(function(){
    q = $(this).text()
    window.location.href = "http://www.domain.com/?="+q.replace(/ /g,"+")
}

你将在浏览器上使用更少的HTML代码，这看起来很简单。

此外，您可能需要在em.title上添加一些css，例如：

em.title{
     cursor:pointer;
}

Answer 5

这样的东西？

$(document).ready(function(){
    var link = $('em').text(); //or $('em.title') if you want
    var link2 = link.replace(/\s/g,"+");
    $('em').html('<a href="http://www.domain.com/?='+ link2 + '">' + link + '</a>');
});

当然，您可以使用任何类型的处理程序替换文档

Answer 6

$('.title').each(function() {
  var $this = $(this),
    text = $this.text(),
    textEnc = encodeURIComponent(text);

  $this.empty().html('<a href="' + textEnc + '">' + text + '</a>');
});

DEMO

使用jQuery查找<em>标签并在其中添加内容</em>

6 个答案: