получить текст между двумя изображениями

Question

Есть ли более простой способ поймать текст между двумя изображениями, у которых нет одного и того же родительского элемента? Я делаю usercript для веб-страницы. как:

<div id="content"></div> 
    <div style="text-align:center"><img src="" alt=""></div> 
    <a>some text</a> 
    <img src="" alt=""> 
    <div style="text-align:left">more text</div> 
</div> 

Как получить текст между 1-ой и 2-го изображения изображения содержания Див. Я не знаю точно правильной структуры, потому что, возможно, текст и изображения могут быть внутри div или узлов. Я предпочел бы не использовать библиотеки

Answer 1

Вы в основном хотите обрабатывать теги <img> как цитаты вокруг текста, который хотите извлечь.

Самый простой способ сделать это - просто заменить тег <img> на что-то, не повторяющееся в тексте, и использовать этот символ в качестве разделителя. Я покажу вам, как использовать jQuery. Если вам нужно это сделать в чистом JS, вам придется преобразовать это.

Во-первых, сделайте копию HTML.

var html = $('<div>').append($("#content").html()); 

Далее, заменить все тег <img> с особым характером (или другим знаком вы знаете, является уникальным).

html.find("img").replaceWith("<div>~</div>"); 

Как только вы это сделали, вы можете просто сопоставить текст между этими разделителями, как это.

var str = html.text(); 
var rx = /~([^~]+)~/g; 
var match = rx.exec(str); 

Чтобы найти все совпадения, просто повторяйте.

while(match != null) 
{ 
    alert(match[1]); 
    match = rx.exec(str);  
} 

Это можно сделать то же самое с уникальной фразой типа @img@ вместо одного символа, но один символ способ проще.

Вот рабочая скрипка.

http://jsfiddle.net/thinkingmedia/etx1z6ov/2/

Answer 2

Этот ответ не лучший, я просто положить его здесь только для информации

1 - Перейти вниз

2 - Переход к следующему собрата

3 - Если нет, поднимитесь и следующий брат.

Повторите.

Это как ходить по долине, как это: D

\     div#content     /
\txt/\ div /\ div /\ div  /\txt/\ div/
     \ a /\txt/ \ a /  \img2/ 
     \img1/   \txt/\txt/ 

Ну, через несколько часов я узнал, и сделал алгоритм:

function textAfterElem (el, nextEl) { 
    var txt = ""; 

    while(true){ 
     //go down 
     while(el.firstChild) { 
      el = el.firstChild; 
      if (el == nextEl) {return txt;} 
     } 
     txt += el.textContent; // extract 
     //go next 
     if (el.nextSibling) { 
      el = el.nextSibling; 
      if (el == nextEl) {return txt;} 
     }else{ 
      //go up 
      while(!el.nextSibling) { 
       el = el.parentNode; 
       if (el == document.body) {return txt;} // for security 
      } 
      if (el.nextSibling) { 
       el = el.nextSibling; // go next 
       if (el == nextEl) {return txt;} 
      }else{ 
       return txt; // for security 
      } 
     } 
    } 
    return txt; 
} 

И он может быть использован не только с изображения, но любой элемент

Answer 3

Улучшение ответ Мэтью с чистым JavaScript:

var html = document.getElementById('content').cloneNode(true); 
var imgs = html.getElementsByTagName('img'); 
for (i = 0; i < imgs.length; i++) { 
    var textSep = document.createTextNode('@img@'); 
    imgs[i].parentNode.insertBefore(textSep, imgs[i]); 
} 
var texts = html.textContent; 
texts = texts.split('@img@'); 

Answer 4

Простой стирают и колотой тоже работает:

html.replace(/<(?!img\b)[^>]*>/g, '').split(/<img\b[^>]*>/) 

С вашего примера результат:

["↵  ", "↵  some text↵  ", "↵  more text↵"]