Как получить текст перед заданным элементом, используя jQuery?

Question

Давайте рассмотрим следующий HTML-код:

<p>
  Some text followed by <span>a span element</span>
  and another text followed by <b>a bold text</b>.
</p>

Как получить текст перед элементами span и b с помощью jQuery?

Я пробовал $("span").prev() и $("b").prev(), но это сработало, потому что текст не является элементом. Я также попробовал $("span").parent(), но он соответствовал целому абзацу, хотя я хочу только его часть.

Не могли бы вы посоветовать какое-нибудь решение? Заранее спасибо: -)

Answer 1

Как насчет сбора их в массив вместо двух вызовов $:

var texts = $('span, b').map(function(){
    return this.previousSibling.nodeValue
});
texts[0]; // "Some text followed by "
texts[1]; // " and another text followed by "

Ссылки:

• Свойство previousSibling
• jQuery.map

Answer 2

Боюсь, для этого вам понадобятся регулярные выражения. Чтобы получить текст перед элементом span, используйте что-то вроде этого:

var txt = $('span').parent().html();
var regex = /(.*)<span>/;
txt = txt.match(regex)[1];

Измените регулярное выражение, чтобы оно соответствовало и другим частям строки.

Answer 3

var textBefore = $('span')[0].previousSibling.nodeValue;

Я искал решение для этого и был смущен, почему мне нужно было сопоставить массив. Контекст не работал для меня. Я наконец понял, как это написать.

Это самое основное решение. Помещение [0] преобразует элемент в elementNode, который позволяет вам вызывать код предыдущегоSibling. Нет необходимости помещать его в массив с помощью функции map, если это не удобно.

Answer 4

Я предложил следующее решение:

var c = $("span").context.previousSibling;
alert(c.data);

Но я не уверен, насколько это безопасно при использовании разных браузеров?