Нахождение текстового узла

Question

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

<div><input type="text">one <span>two</span> three</div>

Я хотел бы получить три из разметки выше и обернуть его в сильный тег, подобный этому:

<div><input type="text">one <span>two</span> <strong>three</strong></div>

Answer 1

Вот как выбрать текстовые узлы с помощью jQuery:

var x = $('div') 
  .contents() 
  .filter(function() { 
    return this.nodeType == 3;
    //return this.nodeType == Node.TEXT_NODE;  this works unless using IE 7
  }); 

В вашем примере x будет содержать «один» в индексе 0 и «три» в индексе 1. Как сказал Кит Руссо, вы не можете просто взять этот текст, но если вы знаете, что он будет последним, вы можете получить это так:

var elemThree = x[x.length-1];

Вы также можете добавить сильный тег следующим образом:

$(x[x.length-1]).wrap("<strong></strong>");

Этот вопрос описывает выбор текстовых узлов с помощью jQuery (мой первый фрагмент кода).

Answer 2

Не без программирования. Если у вашего основного DIV был ID или класс, вы могли бы сделать это:

var html = $("#my_div").html();
var array = html.split("</span>");
array[1] = "<strong>" + array[1] + "</strong>";
html = array[0] + "</span>" + array[1];

$("#my_div").html(html);

Answer 3

Если речь идет не о последнем слове, а о чистом содержании div, попробуйте это:

var chld=$('div').children().clone();
$(div).children().remove();
//now do what You want with the text, eg.
$(div).html('<strong>'+$(div).text()+'</strong>'); //or something like that :)
$(div).prepend(chld); //This is a bottleneck, cause You have to know that 
          //all the text was after all the markup, but it refers to Your example.

Answer 4

CSS не может выделить текстовые узлы

jQuery использует селекторы css3, которые выбирают только элементы. Чтобы получить желаемый эффект, вам нужно сделать следующее:

var div = $('find the div')[0];
var txtNode = div.lastChild
var str = document.createElement('strong')
str.appendChild(txtNode) //removes the text node from the dom.
div.appendChild(str)

Answer 5

Проверьте этот плагин подсветки jQuery: http://tinyurl.com/6rk6ae

Возможно, это не совсем то, что вам нужно, но источник содержит хорошие примеры работы с текстовыми узлами и эффективной модификации DOM вокруг них.

Answer 6

//finds most inner element that has 'three' in it
var el = $(':contains(three):last');
//actual replacement
el.html(el.html().replace('three', '<strong>three</strong>'));

Answer 7

Я не уверен, что вы можете легко сделать это с прямым jQuery, если вы не можете обернуть это слово в другой тег при его записи. Вы можете прибегнуть к регулярным выражениям, например:

function wrapWithTag(tagname, element, text)
{
    var html = element.html();
    var rx = new RegExp('(' + text + ')', "gi");

    element.html(html.replace(rx, '<' + tagname + '>$1</' + tagname + '>'));
}

$(function(){
    wrapWithTag('strong', $('div'), 'three');
});

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

Answer 8

Есть ли причина, по которой вы не можете заключить три в какой-либо элемент html при создании разметки? На самом деле невозможно извлечь случайное слово из текста и обернуть его - если только вы не знаете, что оно всегда будет абсолютным последним словом в div. Если это так, вы можете сделать это, чтобы получить слово:

var txt = $(div).text();
var txtArr = txt.split();
var wordToWrap = txtArr[txtArr.length - 1];