Question

我正在尝试从聊天框中记录包含嵌入式图像的消息。

我目前所拥有的能够捕获所有文本，但是无法捕获图像。

const observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
        if (mutation.addedNodes.length){
            //console.log(mutation)
            console.log(mutation.addedNodes[0].innerText)
        }
    })
})

const chat = document.querySelector('div#messagebuffer')
observer.observe(chat, {
    childList: true
})

节点中的innerHTML产生类似于

<span class="timestamp">[19:09:36] </span><span><img class="channel-emote" src="https://website.com" title="/image"> Lorem Ipsum <img class="channel-emote" src="https://website.com" title="/image2"></span>

基本上，我想解析html中的标题值并使文本看起来像

[19:09:36] /image Lorem Ipsum /image2

Answer 1

假设您只有IMG标签和跨度，则可以执行以下操作。但是由于文本的标记结构如何，日期的span与图像和文本的span处于单独的变异中。这意味着如果您希望将日期和文本记录在一行中，则仍然需要修改以下代码。
您可以通过检查跨度的类并根据其刷新数组来轻松地做到这一点，但这完全取决于您。或者，如果可能，您可以将日期span作为图像和文本的同级。

const observer = new MutationObserver(function (mutations) {
			mutations.forEach(function (mutation) {
				let txtArr = []
				if (mutation.addedNodes.length) {
					mutation.addedNodes[0].childNodes.forEach((node)=>{
						if(node.nodeName == "IMG"){
							txtArr.push(node.title)
						}else{
							txtArr.push(node.wholeText)
						}
							
					})
					
					console.log(txtArr.join(''))
				}
			})
		})

将html替换为html标记内的值

1 个答案: