- 项目需求:将a标签里的href提取出,放置文字后。
- 实现方法:使用DocumentFragment将string转DOM片段,提取href,再组合回到string。
function parseToDOM(htmlstring) {
const tpl = document.createElement("template");
tpl.innerHTML = htmlstring;
return tpl.content;
}
function parseToString(domtree, str) {
if(domtree.childNodes.length) {
domtree.childNodes.forEach(child => parseToString(child, str))
if(domtree.nodeName == "A" && domtree.attributes.href) {
str.push(domtree.attributes.href.nodeValue + " ")
};
} else {
str.push(domtree.nodeValue)
}
}
function stringFormat(str) {
const strDOM = parseToDOM(str)
let newStr = []
parseToString(strDOM, newStr)
return newStr.join("")
}
const str = '测试<a href="http://www.baidu.com" title="11">【点击1】</a>测试<a href="http://www.baidu.com">【点击2】</a>测试'
console.log(str);
console.log(stringFormat(str));
function parseToDOM(htmlstring) {
const tpl = document.createElement("template");
tpl.innerHTML = htmlstring;
return tpl.content;
}
function domToJson(domtree) {
const obj = {}
obj.nodeName = domtree.nodeName
obj.nodeValue = domtree.nodeValue
obj.attributes = domtree.attributes
obj.childNodes = []
domtree.childNodes.forEach(child => obj.childNodes.push(domToJson(child)))
return obj
}
const str = '测试<a href="http://www.baidu.com" title="11">【点击1】</a>测试<a href="http://www.baidu.com">【点击2】</a>测试'
const strDOM = parseToDOM(str);
console.log(domToJson(strDOM));