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

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 中的 {{ .. }} 替换为传递对象中的适当值，如果有的话:

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>

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

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>