如何< li>用另一个标记替换HTML中的标记并将其值放置在新标记中

rhfm7lfc  于 2023-06-20  发布在  其他
关注(0)|答案(2)|浏览(122)

我需要更新以下HTML,以便用<li><li-text>{li value}</li-text> Package 每个<li>

<ul><li>one</li><li>two<ul><li>three<ul><li>four<ul><li>five</li></ul></li></ul></li></ul></li></ul>

提示:我只使用JS,没有JQUERY
我正在尝试这个,但它并不像预期的那样工作!

var html = `<ul><li>one</li><li>two<ul><li>three<ul><li>four<ul><li>five</li></ul></li></ul></li></ul></li></ul>`.replace(/<li[^>]*>/g,'<li><li-text>$&</li-text>')

我得到的结果不正确!list的值应该在<li-text></li-text>标签之间!

<ul><li><li-text><li></li-text>one</li><li><li-text><li></li-text>two<ul><li><li-text><li></li-text>three<ul><li><li-text><li></li-text>four<ul><li><li-text><li></li-text>five</li></ul></li></ul></li></ul></li></ul>
snz8szmq

snz8szmq1#

忘记自己解析HTML。您可以使用浏览器的内置解析器,选择您的li元素,并使用li-text替换要 Package 的内容。

const input = `<ul><li>one</li><li>two<ul><li>three<ul><li>four<ul><li>five</li></ul></li></ul></li></ul></li></ul>`

const parser = new DOMParser()
const doc = parser.parseFromString(input, "text/html")
doc.querySelectorAll("li").forEach(li => li.innerHTML = `<li-text>${li.innerHTML}</li-text>`)

const output = doc.body.innerHTML
console.log(output)
jq6vz3qz

jq6vz3qz2#

将内容解析为HTML,选择所有<li>元素,然后用 Package 器替换每个直接子文本节点:

function addWrapperToLi(html) {
  const parser = new DOMParser();
  const parsed = parser.parseFromString(html, 'text/html');

  const textNodes = [...parsed.querySelectorAll('li')].flatMap(
    // .childNodes contains all kinds of nodes, including elements
    element => [...element.childNodes].filter(
      // ...but we only want text nodes.
      node => node.nodeType === Node.TEXT_NODE
    )
  );

  textNodes.forEach(node => {
    const wrapper = document.createElement('li-text');
    wrapper.innerText = node.textContent;
    node.parentElement.replaceChild(wrapper, node);
  });

  return parsed.body.innerHTML;
}

试试看:

console.config({ maximize: true });

function addWrapperToLi(html) {
  const parser = new DOMParser();
  const parsed = parser.parseFromString(html, 'text/html');

  const textNodes = [...parsed.querySelectorAll('li')].flatMap(
    element => [...element.childNodes].filter(
      node => node.nodeType === Node.TEXT_NODE
    )
  );

  textNodes.forEach(node => {
    const wrapper = document.createElement('li-text');
    wrapper.innerText = node.textContent;
    node.parentElement.replaceChild(wrapper, node);
  });

  return parsed.body.innerHTML;
}

const testcases = [
  '<ul><li>one</li><li>two<ul><li>three<ul><li>four<ul><li>five</li></ul></li></ul></li></ul></li></ul>',
  '<ul><li>one</li><li>two<ul><li>three<ul><li>four<ul><li>five</li></ul>after four</li></ul></li></ul>after two</li></ul>'
];

testcases.forEach(
  testcase => console.log(addWrapperToLi(testcase))
);
<script src="https://gh-canon.github.io/stack-snippet-console/console.min.js"></script>

相关问题