Get placeholder text's parent node

Question

I am trying to find placeholder text (A placeholder looks like this: {{Placeholder}}) within a document, then get the node that it is apart of, then add an attribute to the node. So far I am able to find the placeholder but I don't know which element it is apart of. The current code writes I am here to the console 3 times because it is in 3 nodes: html, body and h1. How can it get the items actual parent node?

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>

score 3 · Accepted Answer · edited May 23 '17 at 11:57

3

This works: (code from 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/ (Ignore the first log, it's just of the way jsfiddle is built)

edited May 23 '17 at 11:57

Community

1
1

answered Nov 08 '13 at 16:24

idmean

14,540
9
54
83

That still gives 3 found results. – Get Off My Lawn Nov 08 '13 at 16:26
@RyanNaddy I just realized myself – idmean Nov 08 '13 at 16:27
if I do `console.log(html)` it outputs `Hello {{name}}!` 2 times – Get Off My Lawn Nov 08 '13 at 16:28
for testing, in the if I put: `element.setAttribute("data-id", "awesome");` and it added it to the h1! – Get Off My Lawn Nov 08 '13 at 16:35

score 0 · Answer 2 · answered Nov 08 '13 at 16:42

I believe this can be achieved only by recursion

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);

Here's an example: http://jsfiddle.net/Ng7j8/

Get placeholder text's parent node

2 Answers2