如何獲取元素中的文本，其中的圖像（JQuery）？

我想獲取匹配元素集合中每個元素的組合文本內容，但其中包含圖像。如何獲取元素中的文本，其中的圖像（JQuery）？

例如，對於此輸入：

<div id="test">Lorem ipsum <strong>dolor</strong> sit amet, consectetur <a href="...">adipiscing</a> elit: <img src="test.png" alt="test"/> Etiam vulputate arcu risus</div>

我想獲得這個輸出：

Lorem ipsum dolor sit amet, consectetur adipiscing elit: <img src="test.png" alt="test"/> Etiam vulputate arcu risus

怎麼可能用JQuery的來管理呢？它幾乎與.text()函數相同，但我應該以某種方式保留圖像。

來源

2017-06-29 Iter Ator

這會不會是直線前進。你可能最好通過節點檢索textNodes和DOMElements的outerHTML，其中tagName =='IMG'。 –

我相信我有一個簡單的解決方案。這裏是你可以做什麼：

var source = $("#test").clone(); //clone your dom element 
source.find(':not(img)').remove(); //remove all tags exept img 
console.log(source.html()); //Watch result in console

UPDATE：

如果你不想刪除的標籤內容：

$("#test").find("*").not("img").each(function() { 
    $(this).replaceWith(this.innerHTML); 
});

這裏是codepen。

更新2：

如果您有嵌套元素：

var beginsWith = function(needle, haystack){ 
    return (haystack.substr(0, needle.length) == needle); 
}; 

var filterHTML = function($elem) { 
    var $cp = $elem.clone(); 

    var changed = true; 
    while(changed) { 
     var tx1 = $cp.html(); 
     $cp.contents().each(function() { 
      if(this.nodeType === Node.COMMENT_NODE) { 
       $(this).remove(); 
      } else if(this.nodeType == Node.ELEMENT_NODE) { 

       if(this.nodeName == 'IMG') { 

        var src = $(this).attr("src"); 

        if(
         !beginsWith("http://",src) && 
         !beginsWith("https://",src) && 
         !beginsWith("data:image",src) 
        ) { 
         $(this).remove(); 
        } 

       } else { 
        $(this).replaceWith(this.innerHTML); 
       } 

      } 

     }); 
     var tx2 = $cp.html(); 
     changed = (tx1 != tx2); 
    } 

    return $cp.html(); 

};

來源

2017-06-29 10:23:47

謝謝。但你能解釋它是如何工作的嗎？ '.remove（）'不僅應該刪除元素本身，而且應該刪除它裏面的所有內容 –

@IterAtor ok，現在我得到你想要的東西。這是更新中的另一個解決方案 –

在對方的回答，如果你發現它會刪除所有的元素標籤除的img因此，強元素中的文本（ dolor）和錨點元素（adipiscing）將不會顯示，請使用此代碼，以便您獲得預期的輸出。

<div id="test">Lorem ipsum <strong>dolor</strong> sit amet, consectetur <a href="...">adipiscing</a> elit: <img src="test.png" alt="test"/> Etiam vulputate arcu risus</div> 
<script> 
$(function(){ 
var $contents = $('#test').contents(); 
var returnString=''; 
for(var i=0;i< $('#test').contents().length; i++){ 
if($contents[i].nodeType == 3) 
    returnString = returnString + $contents[i].textContent; 
else if($contents[i].nodeType != 3 && $contents[i].nodeName != 'IMG') 
    returnString = returnString + $contents[i].innerHTML; 
else 
    returnString = returnString + $contents[i].outerHTML; 
} 
console.log(returnString); 
}); 
</script>

工作小提琴：https://jsfiddle.net/6h924n28/

輸出：Lorem存有悲坐阿梅德，consectetur adipiscing ELIT：img標籤Etiam vulputate arcu risus

來源

2017-06-29 10:43:46

如何獲取元素中的文本，其中的圖像（JQuery）？

回答

相關問題