将html元素转换为字符串Javascript（使用搜索而非内部/外部HTML获得）

Question

I have a JS function which searches for a string in the HTML source, and outputs the parent node:

function searchHTML(searchTerm) {
    queue = [document.body],
    curr
    ;
    while (curr = queue.pop()) {
        if (!curr.textContent.match(searchTerm)) continue;
        for (var i = 0; i < curr.childNodes.length; ++i) {
            switch (curr.childNodes[i].nodeType) {
                case Node.TEXT_NODE : // 3
                    if (curr.childNodes[i].textContent.match(searchTerm)) {
                        console.log(curr);
                        // End of search
                    }
                    break;
                case Node.ELEMENT_NODE : // 1
                    queue.push(curr.childNodes[i]);
                    break;
            }
        }
    }
}

Currently, its output (in Javascript console) is not a string.

I need to perform regex on the output ( curr ), so I need it to be a string.

What I have tried:

curr = curr.toString()

curr = curr.replace(/[0-9]/g, "")

Answer 1

You can use .text() jQuery function to get the string from an HTML .

Here is an example of how you get string :

text= curr.text();

curr = text.replace(/[0-9]/g, "");

Answer 2

It seems to me you need to find the commonAncestorContainer for the term searched. That means if the term starts in a node and ends in another, you don't really have a clear definition of the common parent, until you get the a range.

I put together the function below where you can call search('My Term') and it should get a commonAncestorContainer. Some tweek should still be needed to search the same term more than once and to make sure that words ending inside an element still consider that element as the parent instead of the next one after the parent.

  var search = function (searchTerm) {

        // Stop if there is nothing to look for
        if (!searchTerm || typeof searchTerm !== 'string')
            return null;

        searchTerm = searchTerm.toLowerCase();

        var bodyText = document.body.textContent.toLowerCase(),
            range = document.createRange(),
            startOffset = bodyText.indexOf(searchTerm),
            endOffset = startOffset + searchTerm.length,
            iterationObject = {
                index: 0,
                length: bodyText.length,
                startOffset: startOffset,
                endOffset: endOffset,
                startInNodeOffset: -1,
                endInNodeOffset: -1,
                startNode: null,
                endNode: null
            };


        var textContent = function (textNode) {
            return textNode.nodeValue || textNode.textContent || textNode.wholeText;
        };

        (function iterate (node, iterationObject) {

            if (node.nodeType === 1) {

                var childNodes = node.childNodes;

                // Keep iterating but we should try to stop it when nodes are found
                for (var i = 0, iLen = childNodes.length; i < iLen; i++)
                    iterate(childNodes[i], iterationObject);

            } else if (node.nodeType === 3) {

                var text = textContent(node),
                    startInNodeOffset,
                    endInNodeOffset;

                // Change index and move on
                if (iterationObject.index + text.length < iterationObject.startOffset)
                    iterationObject.index += text.length;

                else if (iterationObject.startNode === null) {

                    startInNodeOffset = iterationObject.startOffset - iterationObject.index;

                    // Start range in the current node
                    // This condition should really only be needed to decide if the selection should start
                    // before or after this node. But that is another story.
                    if (startInNodeOffset <= text.length) {

                        iterationObject.startNode = node;
                        iterationObject.startInNodeOffset = startInNodeOffset;
                    }

                    iterationObject.index += text.length;
                } else {

                    // Now try to find the endNode
                    if (iterationObject.index + text.length < iterationObject.endOffset)
                        iterationObject.index += text.length;

                    else if (iterationObject.endNode === null) {

                        endInNodeOffset = iterationObject.endOffset - iterationObject.index;

                        if (endInNodeOffset <= text.length) {

                            iterationObject.endNode = node;
                            iterationObject.endInNodeOffset = endInNodeOffset;
                        }
                    }  
                }
            }

            if (iterationObject.startNode !== null && iterationObject.endNode !== null)
                return;

        })(document.body, iterationObject);

        if (iterationObject.startInNodeOffset > -1 && iterationObject.endInNodeOffset > -1) {

            range.setStart(iterationObject.startNode, iterationObject.startInNodeOffset);
            range.setEnd(iterationObject.endNode, iterationObject.endInNodeOffset);

            return range.commonAncestorContainer;
        }

        return null;
    };

If you are using jQuery, you can try outerHTML to get the string from the commonAncestorContainer.

var parentElement = search('Whatever'),
    result = '';

if (parentElement !== null)
    result = $(parentElement).outerHTML();

Answer 3

You can create a temporary DOM node, and then append curr to it. Then get the innerHTML and the result will be a string:

var tempNode = document.createElement("div");
tempNode.appendChild(curr);
console.log(temp.innerHTML);

Working example here:

http://codepen.io/anon/pen/QypxwM