Question

我有一个包含此文字的字符串：

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

这可能吗？

Answer 1

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

Answer 2

您可以创建一个临时元素，将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;
}

A working demo at jsFiddle

从字符串中按ID提取元素？

2 个答案: