57< img src="/dev-build/5c1800f8cea587969777d0e2a11ec895.png" class="face-pic" data-labface="4">fd< img src="/dev-build/1157a424588a6732a95ac1d622e129d0.png" class="face-pic" data-labface="17">12< img src="/dev-build/bc2e80fa39a2f7d95737fdbec02c0b27.png" class="face-pic" data-labface="21">比比
这里有这样一个字符串,我想取出文字内容和图片上面的data-labface的属性,按照顺序组成一个数组,
这是一段,用户自行输入的文本内容。
var srcStr = '57< img src="/dev-build/5c1800f8cea587969777d0e2a11ec895.png" class="face-pic" data-labface="4">fd< img src="/dev-build/1157a424588a6732a95ac1d622e129d0.png" class="face-pic" data-labface="17">12< img src="/dev-build/bc2e80fa39a2f7d95737fdbec02c0b27.png" class="face-pic" data-labface="21">比比'
// "<"和"img"之间有个空格, 这不是合法的html.
.replace(/< img/g, '<img')
// 解析为dom
,domParser = new DOMParser()
,doc = domParser.parseFromString(srcStr, 'text/html')
,nodes = Array.prototype.slice.call(doc.body.childNodes)
// 过滤只取文本和img节点, 然后取出文本内容和img的data-labface属性
,resArr = nodes.filter(function(node) {
return node.nodeType==3 || node.tagName=='IMG'
}).map(function(node) {
return node.nodeType==3 ? node.nodeValue : node.getAttribute('data-labface')
})
console.log(resArr)
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。