从存储在变量中的源代码中获取元素

Question

我有这段代码：

chrome.runtime.onMessage.addListener(function(request, sender) {
  if (request.action == "getSource") {
    message.innerText = request.source;
  }
});

我需要从该源代码中的元素中获取文本。例如，考虑具有如下元素的页面：

<a class="something">something goes here</a>

我需要用 JavaScript 获取 class 'something' 的文本。 request.source returns 结构不变的源代码。

Answer 1

您应该能够将源代码转换为 jQuery 对象并从那里像往常一样使用它。

var requestedSource = request.source;
$(requestedSource).find('a.something').first().text();

在 jsfiddle.

上的一个非常简单的测试中，这对我有用

请注意，如果您有多个带有 class "something" 的锚元素，您可能需要尝试使用任何 $.find() returns（我刚刚使用 $ .first() 来简化我的示例）。在这种情况下，您可以像数组一样遍历 $.find() 的结果。

如果该解决方案不起作用，另一种（但更糟糕的）方法是将请求的代码写入隐藏的 div，然后运行 $.find( ) 来自 div（尽管如果第一个解决方案不起作用，则可能是 request.source 本身出了问题，因此请检查其内容）。

例如：

$('body').append('<div id="requestedSource" style="display: none;"></div>');

然后：

$("#requestedSource").append(request.source);
$("#requestedSource").find("a.something").first().text();

如果您经常重复这个请求，您也可以在完成处理后调用 $.empty() 来清空隐藏的 div：

$("#requestedSource").empty();

为了获得最佳性能，您可能希望将所有内容存储在一个变量中并写入一次：

var hiddenRequestSource = '<div id="requestedSource" style="display: none;">';
hiddenRequestSource += request.source;
hiddenRequestSource += '</div>';

$('body').append(hiddenRequestSource);  

var myResults = $("#requestedSource").find("a.something").first().text();
$("#requestedSource").empty();

从存储在变量中的源代码中获取元素

Get elements from source code stored in variable

javascript

jquery

google-chrome-extension

javascript-objects

dom-events