У меня есть скрипт содержимого расширения chrome, который пытается сопоставить строки из массива объектов с textcontent
из узлов html.Если есть совпадение, расширение заменит html, содержащий совпадение, новым html.
У меня проблемы с соответствием.Массив, содержащий строки, состоит из 2367 объектов, каждый из которых содержит свойство name.
Я реализовал TreeWalker, чтобы сузить узлы, которые я анализирую, до тех, которые содержат текст со словами.
По сути, я пытаюсь найти пересечение узлов, содержащих совпадения строк.Однако каждый подход, который я выбрал для этой проблемы, приводит к временам выполнения, которые занимают 5 минут или больше, и / или к узким местам ЦП.Я надеюсь, что вы, ребята, сможете указать, что я делаю неправильно, или направить меня в другом направлении.Заранее спасибо!
До сих пор все мои попытки найти совпадения включали некоторую реализацию RegEx.replace()
кажется самым сложным, но test()
не дает особых улучшений.
Для циклического перемещения по массиву узлов и массиву строковых объектов я пробовал for..of
loop, for
loop, forEach()
с вложенным forEach()
и filter()
с вложенным some()
.
Вот простая версия скрипта содержимого.
const test = (players) => {
let body = document.body;
let bodyCopy = body.cloneNode(true)
let treeWalker = document.createTreeWalker(
bodyCopy,
NodeFilter.SHOW_TEXT,
node => {
let regex = /\w+/gi
if (regex.test(node.textContent)) {
return NodeFilter.FILTER_ACCEPT;
} else {
return NodeFilter.FILTER_SKIP;
}
}
);
let nodes = [];
while (treeWalker.nextNode()) {
nodes.push(treeWalker.currentNode);
}
const intersection = (_players, _nodes) => {
let matchedPlayers = [];
matchedPlayers = _players.filter(player => {
return _nodes.some((node) => {
let re = new RegExp(player.name.full, 'i')
return re.test(node.textContent)
})
})
console.log (matchedPlayers);
}
return intersection(players, nodes)
}
chrome.runtime.onMessage.addListener(
function (request, sender, sendResponse) {
if (request.message === "test") {
console.log(request.players)
test(request.players)
sendResponse({ gotIt: "Got it!" })
}
}
)
Вот как выглядит объект из массива request.players
{
"name": {
"full": "Austin Adams",
"first": "Austin",
"last": "Adams",
"ascii_first": "Austin",
"ascii_last": "Adams",
},
"owned": false
}