Question

是否有一种更简单的方法可以捕获两个图像之间没有相同父元素的文本？我正在为网页制作用户脚本。像：

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

如何获取div内容的第1张图像和第2张图像之间的文本。我不确切地知道正确的结构，因为文本和图像可能在div或节点内。我宁愿不使用库

Answer 1

使用纯javascript改善Mathew的答案：

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

您基本上希望将<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 3

这个答案不是最好的，我只是把它放在这里仅供参考

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 4

简单的擦除和拆分也有效：

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

使用您的示例，结果为：

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

在两个图像之间获取文本

4 个答案: