根据ID从字符串中提取元素

Extract element by ID from string?

本文关键字：提取 元素 字符串 ID 根据      更新时间：2023-09-26

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

<!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>

这可能吗?

您可以使用本机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不会尝试应用于它，不会发生渲染，等等。

您可以创建一个临时元素，将HTMLString作为其内容，然后使用querySelector获得传递id的元素。像这样:

function ExtractElementByIdFromString(HTMLString, IdString) {
    var result,
        temp = document.createElement('div'); // Create a temporary element
    temp.innerHTML = HTMLString; // Set the passed string as HTML to the temporary element
    result = temp.querySelector('#' + IdString).outerHTML; // Find an element with the passed id
    return result;
}

jsFiddle的工作演示

相关文章：