如何在浏览器中用纯JS或jQuery提取HTML代码片段内容

纯JavaScript实现 #

直接解析HTML片段，提取列表文本后拼接成目标格式：

// 原始HTML片段字符串
const originalHtml = '<ul>    <li>New York</li>    <li>London</li>    <li>Madrid</li>    <li>Paris</li></ul>';

// 解析HTML为DOM结构
const parser = new DOMParser();
const doc = parser.parseFromString(originalHtml, 'text/html');

// 提取所有li的文本内容并去空格
const cityTexts = Array.from(doc.querySelectorAll('li')).map(li => li.textContent.trim());

// 生成目标p标签的HTML代码
const resultHtml = `<p>${cityTexts.join(', ')}</p>`;

console.log(resultHtml); // 输出: <p>New York, London, Madrid, Paris</p>

jQuery实现 #

利用jQuery的DOM解析和遍历能力快速完成转换：

// 原始HTML片段字符串
const originalHtml = '<ul>    <li>New York</li>    <li>London</li>    <li>Madrid</li>    <li>Paris</li></ul>';

// 解析HTML并提取li文本
const cityTexts = $(originalHtml).find('li').map(function() {
  return $(this).text().trim();
}).get();

// 生成结果HTML
const resultHtml = `<p>${cityTexts.join(', ')}</p>`;

console.log(resultHtml); // 输出: <p>New York, London, Madrid, Paris</p>

内容的提问来源于stack exchange，提问作者JohnnyBravo