javascript - Webワーカー内で、文字列からhtml属性を見つける方法は?

Question

Web ワーカー内に、次のような html 文字列があります。

"<div id='foo'>  <img src='bar'></img>  <ul id='baz'></ul>  </div>"

さまざまなタグの id および src 属性に簡単にアクセスするためにインポートできるライブラリはありますか? worker 内の唯一の方法は正規表現ですか?

Answer 1

この問題を効率的に解決するには、次の 2 つの方法があります。

正規表現

誤検知のリスクがあるため、次のようなものを使用できます。

var pattern = /<img [^>]*?src=(["'])((?:[^"']+|(?!\1)["'])*)(\1)/i;
var match = string.match(pattern);
var src = match ? match[2] : '';

組み込みのパーサーとメッセージング

HTML を正しく取得することが重要な要件である場合は、文字列を呼び出し元に渡して、ブラウザーに HTML を解析させます。完全な例を次に示します。

発信者:

var worker = new Worker('worker.js');
worker.addEventListener('message', function(e) {
    if (!e.data) return;
    if (e.data.method === 'getsrc') {
        // Unlike document.createElement, etc, the following method does not 
        //  load the image when the HTML is parsed
        var doc = document.implementation.createHTMLDocument('');
        doc.body.innerHTML = e.data.data;
        var images = doc.getElementsByTagName('img');
        var result = [];
        for (var i=0; i<images.length; i++) {
            result.push(images[i].getAttribute('src'));
        }
        worker.postMessage({
            messageID: e.data.messageID,
            result: result
        });
    } else if (e.data.method === 'debug') {
        console.log(e.data.data);
    }
});

worker.js

// A simple generic messaging API
var callbacks = {};
var lastMessageID = 0;
addEventListener('message', function(e) {
   if (callbacks[e.data.messageID]) {
       callbacks[e.data.messageID](e.data.result);
   }
});
function sendRequest(method, data, callback) {
    var messageID = ++lastMessageID;
    if (callback) callbacks[messageID] = callback;
    postMessage({
        method: method,
        data: data,
        messageID: messageID
    });
}

// Example:
sendRequest('getsrc',
    '<img src="foo.png">' + 
    "<img src='bar.png'>" + 
    '<textarea><img src="should.not.be.visible"></textarea>',
    function(result) {
        sendRequest('debug', 'Received: ' + result.join(', '));
    }
);