将a标签里的href提取出,放置文字后

387 阅读1分钟
  • 项目需求:将a标签里的href提取出,放置文字后。
  • 实现方法:使用DocumentFragment将string转DOM片段,提取href,再组合回到string。
// 字符串转DOM片段
function parseToDOM(htmlstring) {
  const tpl = document.createElement("template");
  tpl.innerHTML = htmlstring;
  return tpl.content;
}
// DOM片段转字符串
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));
  • 其它功能:DOM转JSON
// 字符串转DOM片段
function parseToDOM(htmlstring) {
  const tpl = document.createElement("template");
  tpl.innerHTML = htmlstring;
  return tpl.content;
}
// DOM片段转JSON
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));