如何在 JavaScript 中从字符串中剥离 HTML

在本教程的范围内,我们将展示两种在 JavaScript 中从字符串中剥离 HTML 的方法。

该函数可以执行内联 JavaScript 代码:

function stripHtml(html) {
  //创建一个新的 div 元素
  let temporalDivEl = document.createElement("div");
  //使用provider设置 HTML 内容
  temporalDivEl.innerHTML = html;
  //获取元素的文本属性(浏览器支持)
  return temporalDivEl.textContent || temporalDivEl.innerText || "";
}
let htmlString = "<div><h1>Welcome to onitroad.</h1>\n<p> hello onitroad</p></div>";
console.log(stripHtml(htmlString));

如果在浏览器中运行,最好使用 DOMParser:

function strip(html) {
  let doc = new DOMParser().parseFromString(html, 'text/html');
  return doc.body.textContent || "";
}

如果我们在浏览器中运行以测试内联 JavaScript,请使用以下代码:

function strip(html) {
  //创建一个新的 div 元素
  let temporalDivEl = document.createElement("div");
  //使用provider设置 HTML 内容
  temporalDivEl.innerHTML = html;
  //获取元素的文本属性(浏览器支持)
  return temporalDivEl.textContent || temporalDivEl.innerText || "";
}
strip("<img onerror='console.log(\"可以在这里运行任意JS\")' src=bogus>")

此外,它不会在解析时请求资源,例如图像:

function strip(html) {
  //创建一个新的 div 元素
  let temporalDivEl = document.createElement("div");
  //使用provider设置 HTML 内容
  temporalDivEl.innerHTML = html;
  //获取元素的文本属性(浏览器支持)
  return temporalDivEl.textContent || temporalDivEl.innerText || "";
}
console.log(strip("Just text <img src='https://www.onitroad.com/bg.png'>"));

此解决方案仅适用于浏览器。

DOM解析器

DOMParser 接口允许将 XML 或者 HTML 源代码从字符串解析为 DOM 文档。

XMLHttpRequest 直接从 URL 可寻址资源解析 XML 和 HTML,并在其响应属性中返回一个文档。

日期:2020-06-02 22:16:26 来源:oir作者:oir