如何在不使用任何库的情况下显示一组所有匹配元素中双括号之间的数据？

Question

我想制作一个可以做这样的事情的函数：

HTML :

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

JS :

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

输出：

 I am Arc
 Arc learn JavaScript

是否可以制作可以做到这一点的data()函数？我不想为了使用这个功能而使用任何外部库！

Answer 1

使用正则表达式将 HTML 中的 {{ .. }}s 替换为传递对象中的适当值，如果有一个：

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>

如果你还需要考虑嵌套元素，那么select父级的所有文本节点，做同样的事情：

const getTextNodes = (parent) => {
    // 
    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>

如何在不使用任何库的情况下显示一组所有匹配元素中双括号之间的数据？

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

javascript

braces