How to display data between double braces in a set of all matches elements without using any library?

Question

I want to make a function that can do something like this :

HTML :

 <h1 class="demo">I am {{ name }}</h1>
 <span class="demo">{{ name }} learn JavaScript</span>

JS :

data(".demo", {
   name: "Arc"
};

Output :

 I am Arc
 Arc learn JavaScript

Can the data() function be made which can do this ? I don't want to use any external library for just using this function !

Welcome to Stack Overflow! Please take the [tour] (you get a badge!) and read through the [help], in particular [*How do I ask a good question?*](/help/how-to-ask) Your best bet here is to do your research, [search](/help/searching) for related topics on SO, and give it a go. ***If*** you get stuck and can't get unstuck after doing more research and searching, post a [mcve] of your attempt and say specifically where you're stuck. People will be glad to help. — T.J. Crowder, Oct 12 '19 at 10:38

CertainPerformance · Accepted Answer · 2019-10-12T10:42:47.523

2

Use a regular expression to replace {{ .. }}s in the HTML with the appropriate value in the passed object, if there is one:

const data = (selector, obj) => {
  document.querySelectorAll(selector).forEach((elm) => {
    elm.textContent = elm.textContent.replace(
      /{{ *(\w+) *}}/g,
      // If key is in the obj, replace with the value
      // otherwise, replace with the match (make no changes):
      (match, key) => key in obj ? obj[key] : match
    );
  });
};

data(".demo", {
   name: "Arc"
});

 <h1 class="demo">I am {{ name }}</h1>
 <span class="demo">{{ name }} learn JavaScript</span>

If you also need to take into account nested elements, then select all text nodes of the parent, and do the same thing:

const getTextNodes = (parent) => {
    // https://stackoverflow.com/questions/2579666/getelementsbytagname-equivalent-for-textnodes
    var walker = document.createTreeWalker(
        parent, 
        NodeFilter.SHOW_TEXT, 
        null, 
        false
    );

    var node;
    var textNodes = [];

    while(node = walker.nextNode()) {
        textNodes.push(node);
    }
    return textNodes;
}

const data = (selector, obj) => {
  document.querySelectorAll(selector).forEach((elm) => {
    getTextNodes(elm).forEach((node) => {
      node.textContent = node.textContent.replace(
        /{{ *(\w+) *}}/g,
        // If key is in the obj, replace with the value
        // otherwise, replace with the match (make no changes):
        (match, key) => key in obj ? obj[key] : match
      );
    });
  });
};

data(".demo", {
   name: "Arc"
});

span > span {
  background-color: yellow;
}

<h1 class="demo">I am {{ name }}</h1>
 <span class="demo">{{ name }} learn JavaScript <span> nested {{ name }} </span></span>

edited Oct 12 '19 at 10:42

answered Oct 12 '19 at 10:38

CertainPerformance

356,069
52
309
320

Assigning to `textContent` on an element like that will wipe out its child elements. To avoid destructive changes, you need to work at the node level, not the element level. – T.J. Crowder Oct 12 '19 at 10:39
I have a question how can I then insert Html in place of text ? – Debarchito Oct 12 '19 at 11:07
e.g. data(".demo", { name: "Arc" }); – Debarchito Oct 12 '19 at 11:08
@ArcanadianArc That'd be significantly more complicated. If you don't have nested elements, or if there's nothing attached to the nested elements that needs to be preserved, reassign the `innerHTML` of the container, instead of its `textContent` – CertainPerformance Oct 12 '19 at 11:09
A thing suddenly came in my mind. Can this be done ? e.g. data(".demo", { name: { age: "12" } }); and in HTML
{{ name.age }}
– Debarchito Oct 12 '19 at 11:22
If no then how can I gain it ? – Debarchito Oct 12 '19 at 11:24
@ArcanadianArc Possible, but unwieldly: https://stackoverflow.com/questions/6491463/accessing-nested-javascript-objects-with-string-key – CertainPerformance Oct 12 '19 at 11:25

How to display data between double braces in a set of all matches elements without using any library?

1 Answers1

{{ name.age }}