Использование jQuery для поиска тегов <em> и добавления в них содержимого

Пользователи моего обзора выделяют названия платформ (фильмов, книг и т. Д.) В <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>

Как я могу сделать это в лучших практиках при рассмотрении производительности. Это очень загруженная платформа.

Источник

6 ответов

Решение

Попробуй это:

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;
    }
}

Вот скрипка

Обновление: http://jsfiddle.net/1t5efadk/14/

Финал: http://jsfiddle.net/186hwg04/8/

Источник 
$("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);
});

Если вы хотите удалить любые знаки препинания, обратитесь к этому другому вопросу.

Источник 

$('em.title').html(function(i,html) {
  return $('<a/>',{href:'http://domain.com/?='+html.trim().replace(/\s/g,'+'),text:html});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<em class="title">Pacific Rim</em>

ОБНОВЛЕНИЕ 1

Следующая обновленная версия выполнит следующее:

  1. Возьмите содержимое em элемент
  2. Объединить с содержимым следующего элемента, если em и удалить этот элемент
  3. Создайте параметр строки запроса из этого со следующими свойствами
    • Удалить персонажей ,.&
    • Удалить HTML
  4. Добавьте параметр запроса к заданному URL-адресу и оберните неизмененное содержимое в e элемент с новым URL.

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()});
});

Или ДЕМО

$('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

Согласно комментариям, вышеупомянутые версии имеют две проблемы:

  1. Объедините два элемента, которые могут быть разделены текстовым узлом.
  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()});
});
Источник

На самом деле, если вы просто хотите добавить событие клика на em.titleЯ предлагаю вам использовать как это:

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

Вы будете использовать меньше HTML-кода в браузере, и это кажется просто.

Кроме того, вам может понадобиться добавить некоторые CSS на em.title,лайк:

em.title{
     cursor:pointer;
}
Источник

Что-то вроде этого?

$(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>');
});

Конечно, вы можете заменить готовый документ любым типом обработчика.

Источник 
$('.title').each(function() {
  var $this = $(this),
    text = $this.text(),
    textEnc = encodeURIComponent(text);

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

DEMO

Источник
Другие вопросы по тегам