Question

当我在ace编辑器中编辑HTML时，有没有办法以简单的方式查询HTML？选择器？

[fake-html-dom].querySelectorAll("A").length

我读到当你使用jQuery $('<html code>')时，html被插入到真正的DOM中，我想避免在窗口/ iframe中实际运行它。

能够直接在编辑器中修改找到的元素（如自定义突出显示）也很不错。

Answer 1

你可以像这样创建一个假的html文档对象：

var docImpl = document.implementation;
var fakeDoc = docImpl.createHTMLDocument("myhtml"/*it is just a title*/);

当您首先使用Ace html编辑器时，您应该从编辑器中读取html字符串，然后提取正文内容，最后将其插入假身体。这些是您采取的步骤：

//Ace usually uses ace_text-layer as the classname for the html string part
var htmlContent = document.querySelector(".ace_text-layer").innerText;
//you can also change this part if it didn't work, depends on your Ace version

现在您应该提取正文内容，如果其中包含<html>或<body>个标记：

var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
var array_matches = pattern.exec(htmlContent);
var extractedContent = array_matches[1];

然后将其插入假身体

fakeDoc.body.innerHTML = extractedContent;

并最终执行您可能需要的任何所需查询：

fakeDoc.querySelectorAll("A").length

有没有办法在Ace代码编辑器中查询HTML？

1 个答案: