jquery: найти строку и обернуть ее в тег ?
У меня есть это:
<div class="" id="fancy_hover">
<a href="home.html" id="start_writer"></a>
<div>
<p class="hidden" style="display: block;">click here to see this event with all the bells and whistles</p>
</div>
</div>
Мне нужно сделать эквивалент .find(), но для строки "click here" вместо узла мне нужно обернуть его в <a> тег.
Каков наилучший подход с JQuery?
2 ответа
Use :contains filter selector:
$('p.hidden:contains("click here")')
To wrap it in link:
$('p.hidden:contains("click here")').html()
.replace('click here', '<a href="url">click here</a>');
To wrap whole text in link:
$('p.hidden:contains("click here")')
.html('<a href="url">' + $('p.hidden:contains("click here")').text() + '<a>');
More Info:
Не используйте взлом строки HTML. Представьте, что произойдет, если вы попытаетесь заменить более ... тегом ... массово сломанная разметка. И это только начало проблем.
Вместо этого перебирайте текстовые узлы в той части документа, которую вы хотите исследовать, ищите текстовые совпадения и вставляя новую ссылку, используя методы в стиле DOM.
jQuery здесь не особо поможет, так как не имеет функций для обработки текстовых узлов. Вместо этого используйте что-то вроде функции findText () из этого вопроса и используйте splitText для разделения текстового узла:
findText($('#fancy_hover')[0], /\bClick here\b/gi, function(node, match) {
node.splitText(match.index+match[0].length);
var link= document.createElement('a');
link.href= 'http://www.example.com/';
link.appendChild(node.splitText(match.index));
node.parentNode.insertBefore(link, node.nextSibling);
});