获取两个图像之间的文本

Question

Is there a simpler way to catch the text between two images which haven't a same parent element? I'm making a userscript for a webpage. Like:

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

How to get the text between the 1st image and 2nd image of the div content. I don't know exactly the correct structure because maybe the text and the images could be inside of div or a nodes. I'd rather not use libraries

Answer 1

Improving Mathew's answer with pure 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 2

You basically want to handle the <img> tags as quotes around text you want to extract.

The easiest way to do that is to just replace the <img> tag with something not likely repeated in the text, and use that character as a delimiter. I'll show you how using jQuery. If you need it done in pure JS than you'll have to convert this.

First, make a copy of the HTML.

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

Next, replace all <img> tags with a special character (or other token you know is unique).

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

Once you've done that you can just match text between those delimiters like this.

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

To find all matches just repeat.

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

It's possible to do the same with a unique phrase like @img@ instead of a single character, but a single character is way easier.

Here's a working fiddle.

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

Answer 3

This answer is not the best, I just put it here just for info

1 - Go down

2 - Go to the next sibling

3 - If there isn't, go up and the next sibling.

Repeat.

It's like walking through a valley like this :D

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

Well, after several hours I found out, and made the algorithm:

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

And it could be used not only with images but any element

Answer 4

A simple erase and split works too:

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

With your example the result is:

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