获取占位符文本的父节点答案

【问题标题】：Get placeholder text's parent node获取占位符文本的父节点
【发布时间】：2013-11-20 17:47:25
【问题描述】：

我正在尝试在文档中查找占位符文本（占位符如下所示：{{Placeholder}}），然后获取它所在的节点，然后向节点添加属性。到目前为止，我能够找到占位符，但我不知道它属于哪个元素。当前代码将 我在这里 写入控制台 3 次，因为它位于 3 个节点中：html、body 和 h1。如何获取items的实际父节点？

JavaScript：

function getPlaceholders(){
    var elements = document.getElementsByTagName("*");
    for(var e in elements){
        var element = elements[e];
        var html = element.innerHTML;
        if(html && (matches = html.match(/{{(.+)}}/g))){
            console.log("I am here");
        }
    }
}

HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1>Hello {{name}}!</h1>
    </body>
</html>

【问题讨论】：

标签： javascript html

【解决方案1】：

这行得通：（来自here的代码）

function getPlaceholders(){
    var elements = document.getElementsByTagName("*");
    for(var e in elements){
        var element = elements[e];
        child = element.firstChild,
        texts = [];

        while (child) {
            if (child.nodeType == 3) {
                texts.push(child.data);
            }
            child = child.nextSibling;
        }

        var html = texts.join("");
        if(html && (matches = html.match(/{{(.+)}}/g))){
            console.log(html);
        }
    }
}

http://jsfiddle.net/wumm/2VjVa/（忽略第一个日志，这只是jsfiddle的构建方式）

【讨论】：

这仍然给出了 3 个找到的结果。
@RyanNaddy 我才意识到自己
如果我这样做console.log(html)，它会输出Hello {{name}}! 2 次span>
用于测试，如果我输入：element.setAttribute("data-id", "awesome"); 并将其添加到 h1！

【解决方案2】：

我相信这只能通过递归来实现

function getPlaceholders(elem) {
    // we search for the {{...}} pattern ONLY for this element
    var html = elem.firstChild.data;
    if(html && (matches = html.match(/{{(.+)}}/g))){
        console.log(elem, "I am here");
    }

    // if there are any descendants of this elem, we also call the getPlaceholders function for them
    var elements = elem.children;
    if (elements.length) {
        for(var i = 0; i < elements.length; i++) {
            getPlaceholders(elements[i]);
        }
    }
}

//starting at the body
getPlaceholders(document.body);

这是一个例子：http://jsfiddle.net/Ng7j8/

【讨论】：