javascript - 从字符串中按ID提取元素?

标签 javascript html

我有一个包含以下文本的字符串:

<!DOCTYPE html>
<html>
<head>
    <title>ExtractDiv test</title>
</head>
<body>
    <p>Apples and oranges</p>
    <div id="main">
        <ul style="list-style-type: upper-roman">
            <li>&#196;pfel</li>
            <li>Birnen</li>
        </ul>
    </div>
    <p>Men and women</p>
</body>
</html>

现在我需要一个 JavaScript 函数,它返回一个具有特定 ID 的 DOM 元素作为字符串,例如:

function ExtractElementByIdFromString(HTMLString, IdString)
{
  var ExtractedElement = ???(HTMLString, IdString);
  return ExtractedElement;
}

所以在这种情况下这个函数的结果是:

<div id="main">
    <ul style="list-style-type: upper-roman">
        <li>&#196;pfel</li>
        <li>Birnen</li>
    </ul>
</div>

这可能吗?

最佳答案

您可以使用 native DOMParser 解析 HTML 字符串:

var str = "<!DOCTYPE……………" // your HTML string

var doc = new DOMParser().parseFromString(str, "text/html")

然后只需使用常规 DOM 方法:

console.log( doc.getElementById("main") )

请注意,使用 DOMParser 比在文档的 innerHTML 中的某处插入字符串更有效、更安全,因为只会创建结构 — <script>元素不会被执行,图像不会被加载,CSS 不会尝试应用于它,不会发生渲染等。

关于javascript - 从字符串中按ID提取元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32894426/

相关文章:

javascript - 无法过滤 AJAX 请求中的数据

html - 使用 CSS 打印页面

html - 子列表父级中的 CSS 菜单布局

html - 如何从打印页面中删除 URL?

html - div 内的垂直对齐链接

javascript - 如何通过代码/脚本在 Firefox 中加载 PKCS#11 设备?

javascript - React 解析意外的 token

javascript - js( Node )中的条件语句没有响应

javascript - 使用 Jest 测试 React 应用程序时如何查询原生 html 元素?

html - ng-form 和自动完成 ="off"