Вопрос по highlight, javascript, performance – Выделение текста в документе (JavaScript) эффективно

1

Как я могу (эффективно - не замедляя работу компьютера) выделить определенную часть страницы?

Скажем так, моя страница такова:

<html>
<head>
</head>
<body>
"My generic words would be selected here" !.
<script>
//highlight code here
var textToHighlight = 'selected here" !';
//what sould I write here?
</script>
</body>
</html>

Моя идея состоит в том, чтобы «клонировать» все тело в переменную и найти через indexOf указанного текста, изменить (вставить диапазон с цветом фона) & quot; клонировано & quot; заштрихуйте и замените & quot; реальный & quot; тело с "клонированным" один.
Я просто думаю, что это неэффективно.
У тебя есть другие идеи? (будь креативным :) )

Ваш Ответ

3   ответа
4

Я адаптировал следующее из своих ответов на несколько похожих вопросов по SO (пример). Он разработан для повторного использования и доказал свою эффективность. Он пересекает DOM в указанном вами узле контейнера, ищет каждый текстовый узел для указанного текста и использует методы DOM, чтобы разбить текстовый узел и окружить соответствующий фрагмент текста в стиле<span> элемент.

Демо-версия:http://jsfiddle.net/HqjZa/

Код:

// Reusable generic function
function surroundInElement(el, regex, surrounderCreateFunc) {
    // script and style elements are left alone
    if (!/^(script|style)$/.test(el.tagName)) {
        var child = el.lastChild;
        while (child) {
            if (child.nodeType == 1) {
                surroundInElement(child, regex, surrounderCreateFunc);
            } else if (child.nodeType == 3) {
                surroundMatchingText(child, regex, surrounderCreateFunc);
            }
            child = child.previousSibling;
        }
    }
}

// Reusable generic function
function surroundMatchingText(textNode, regex, surrounderCreateFunc) {
    var parent = textNode.parentNode;
    var result, surroundingNode, matchedTextNode, matchLength, matchedText;
    while ( textNode && (result = regex.exec(textNode.data)) ) {
        matchedTextNode = textNode.splitText(result.index);
        matchedText = result[0];
        matchLength = matchedText.length;
        textNode = (matchedTextNode.length > matchLength) ?
            matchedTextNode.splitText(matchLength) : null;
        surroundingNode = surrounderCreateFunc(matchedTextNode.cloneNode(true));
        parent.insertBefore(surroundingNode, matchedTextNode);
        parent.removeChild(matchedTextNode);
    }
}

// This function does the surrounding for every matched piece of text
// and can be customized  to do what you like
function createSpan(matchedTextNode) {
    var el = document.createElement("span");
    el.style.backgroundColor = "yellow";
    el.appendChild(matchedTextNode);
    return el;
}

// The main function
function wrapText(container, text) {
    surroundInElement(container, new RegExp(text, "g"), createSpan);
}

wrapText(document.body, "selected here");
Error: User Rate Limit Exceeded funerr
Error: User Rate Limit Exceededdemo
Error: User Rate Limit ExceededinnerHTMLError: User Rate Limit ExceededinnerHTMLError: User Rate Limit Exceeded
1
<html>
<head>
</head>
<body>
<p id="myText">"My generic words would be selected here" !.</p>
<script>
//highlight code here
var textToHighlight = 'selected here" !';
var text = document.getElementById("myText").innerHTML
document.getElementById("myText").innerHTML = text.replace(textToHighlight, '<span style="color:red">'+textToHighlight+'</span>');
//what sould I write here?
</script>
</body>
</html>
@SelimOber, я имею в виду под эффективным: - Низкое потребление процессора funerr
Спасибо, я вижу, это работает, но как насчет эффективности? funerr
Есть два метода для вашей операции: 1 - с выражением regulare = & gt; требуется много ресурсов (загрузка процессора) 2 - поиск строки и замена без Regex (см. мой пример) = & gt; Perfomant, но не ограничиваясь сложными строками. Извините за мой английский
Каковы ваши проблемы эффективности?Efficient само по себе не предоставляет достаточно информации.
Большая проблема заключается в неэффективности замены целогоinnerHTML потенциального сложного элемента, который превзойдет любую неэффективность использования регулярного выражения. Альтернатива - обход DOM.
0

использованиеthis в комбинации сthis и ты должен быть в порядке. (Это почти лучше, чем пытаться реализовать логику выделения / выделения выделения самостоятельно.)

Нет, не то, что мне нужно. funerr

Похожие вопросы