英文:
How to replace <li> tag in HTML with another tag and place it value in the new tag
问题
Sure, here is the translated HTML code with the <li> elements wrapped as requested:
<ul><li><li-text>one</li-text></li><li><li-text>two</li-text><ul><li><li-text>three</li-text><ul><li><li-text>four</li-text><ul><li><li-text>five</li-text></ul></li></ul></li></ul></li></ul>
I've wrapped each <li> element with <li-text>{li value}</li-text> as you requested.
英文:
I need to update the following HTML to wrap each <li> with <li><li-text>{li value}</li-text>
<ul><li>one</li><li>two<ul><li>three<ul><li>four<ul><li>five</li></ul></li></ul></li></ul></li></ul>
hints: I ONLY USING JS, NO JQUERY
I'm trying this, but it's not working as expected!
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>')
The result I'm getting is not correct! the value of list should be between <li-text></li-text> tags!
<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>
答案1
得分: 1
忘记自己解析HTML吧。您可以使用浏览器内置的解析器，选择您的li元素，并替换要包装在li-text中的内容。
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.innerHTMLconsole.log(output)
英文:
Forget about parsing HTML yourself. You can use the browser's built-in parser, select your li elements, and replace the content to be wrapped with li-text.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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.innerHTMLconsole.log(output)
<!-- end snippet -->
答案2
得分: 1
解析内容为HTML，选择所有<li>元素，然后用包装器替换每个直接子级文本节点：
function addWrapperToLi(html) {const parser = new DOMParser();const parsed = parser.parseFromString(html, 'text/html');const textNodes = [...parsed.querySelectorAll('li')].flatMap(// .childNodes 包含各种节点，包括元素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;}
尝试它：
<!-- begin snippet: js hide: true --><!-- language: lang-js -->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></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></li></ul>after two</li></ul>'];testcases.forEach(testcase => console.log(addWrapperToLi(testcase)));<!-- language: lang-html --><script src="https://gh-canon.github.io/stack-snippet-console/console.min.js"></script><!-- end snippet -->
英文:
Parse the content as HTML, select all <li> elements, then replace each direct-children text node with a wrapper:
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 elementselement => [...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;}
Try it:
<!-- begin snippet: js hide: true -->
<!-- language: lang-js -->
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)));
<!-- language: lang-html -->
<script src="https://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论