如何在vanilla JavaScript中创建类似vue js的语法？

{{msg}}

让我们认为msg是JavaScript的变量，现在我想获取{{msg}}的父标记，并通过innerHTML推送一个新值，这里{{msg}作为一个标识

演示JavaScript示例：

var msg=“这是更新数据”；
{{msg}}.parentElement.innerHTML=msg；

---

这不是实际的JavaScript代码，只是为了更好地理解

您可以轻松地使用jquery查找该元素，然后替换文本

var msg = "This is update data";

$(`span:contains(${msg})`).html("Its New");

在javascript中：

var spanTags = document.getElementsByTagName("span");
var msg = "This is update data";
var found;

for (var i = 0; i < spanTags.length; i++) {
  if (spanTags[i].textContent == msg) {
    found = spanTags[i];
    break;
  }
}

---

最简单的方法是将整个文档视为字符串，然后在完成后重新解析它

.innerHTML

属性既是HTML反编译器又是编译器，具体取决于您是读取还是写入它。例如，如果您有一个要在文档中替换的变量列表，您可以执行以下操作：

let vars = {
    msg: msg,         // pass value as variable
    test_number: 10,  // pass value as number
    test_str: 'hello' // pass value as string
};

let htmlText = document.body.innerHTML;

// find each var (assuming the syntax is {{var_name}})
// and replace with its value:

for (let var in vars) {
    let pattern = '\\{\\{\\s*' + var + '\\s*\\}\\}';
    let regexp = new RegExp(pattern, 'g'); // 'g' to replace all
    htmlText = htmlText.replace(regexp, vars[var]);
}

// Now re-parse the html text and redraw the entire page
document.body.innerHTML = htmlText;

这是实现

{{var}}

语法的一种快速、简单但残酷的方法。只要你已经正确地指定/设计了语法，使它不可能出现在HTML标签中间（例如，代码> hello /COD>），那么这就可以了。 重新绘制整个页面可能会有性能损失，但是如果您没有一直这样做（动画），那么您通常不会注意到。在任何情况下，如果您担心性能，请始终对代码进行基准测试

---

一种更微妙的方法是只在文本节点上操作，这样我们就不会意外地弄乱真正的html标记。这样做的关键是编写自己的递归下降解析器。所有节点都有一个

.childNodes

属性，DOM严格来说是一个树（非循环），因此我们可以扫描整个DOM并搜索语法

我不打算为此编写完整的代码，因为它可能会涉及很多内容，但基本思想如下：

const TEXT_NODE = 3;

let vars = {
    msg: msg,         // pass value as variable
    test_number: 10,  // pass value as number
    test_str: 'hello' // pass value as string
};

function walkAndReplace (node) {
    if (node.nodeType === TEXT_NODE) {
        let text = node.nodeValue;

        // Do what you need to do with text here.
        // You can copy the RegExp logic from the example above
        // for simple text replacement. If you need to generate
        // new DOM elements such as a <span> or <a> then remove
        // this node from its .parentNode, generate the necessary
        // objects then add them back to the .parentNode
    }
    else {
        if (node.childNodes.length) {
            for (let i=0; i<node.childNodes.length; i++) {
                walkAndReplace(node.childNodes[i]); // recurse
            }
        }
    }
}

walkAndReplace(document.body);

const TEXT_NODE=3；
设变量={
msg:msg，//将值作为变量传递
测试编号：10，//将值作为编号传递
test_str:'hello'//将值作为字符串传递
};
函数位置（节点）{
if（node.nodeType==TEXT\u节点）{
让text=node.nodeValue；
//在这里对文本执行您需要执行的操作。
//您可以从上面的示例复制RegExp逻辑
//用于简单的文本替换。如果需要生成
//新的DOM元素，如a或然后删除
//此节点从其.parentNode生成必要的
//对象，然后将它们添加回.parentNode
}
否则{
if（node.childNodes.length）{
对于（设i=0；i可能的重复项实际上，在重新阅读代码示例后，我不确定重复项是否正确。主要是因为我不确定它应该如何工作-什么是
{msg}
应该解析为？保存
msg
的元素？保存
msg
文本节点？即使如此，是保存
msg
的任何元素，而不管其类型或原因如何，还是使用
{msg}定义的特定绑定
template？另外，
msg
是在作用域中定义的，它只是一个字符串，所以我不知道如何将其解析为“超出作用域的内容”。我不确定这应该如何工作。
.innerText
是一个HtmleElement属性，而不是jQuery方法。对于jQuery，应该使用
.text（）
如果您使用的是HTMLElement，那么您可能应该使用
.textContent
，因为它比
更一致。innerText
我需要核心javascript的答案，代码您可以帮助我吗？我想根据{{{捕获标记“{msg}”，因为这里可以是任何类型的标记，但“{somthing}”这是我的CythTyth.@ MuhibbullahAnsary，在这种情况下，你需要遍历每个渲染的元素。Yo应该考虑ID/Cor类以获得更好的性能。
const TEXT_NODE = 3;

let vars = {
    msg: msg,         // pass value as variable
    test_number: 10,  // pass value as number
    test_str: 'hello' // pass value as string
};

function walkAndReplace (node) {
    if (node.nodeType === TEXT_NODE) {
        let text = node.nodeValue;

        // Do what you need to do with text here.
        // You can copy the RegExp logic from the example above
        // for simple text replacement. If you need to generate
        // new DOM elements such as a <span> or <a> then remove
        // this node from its .parentNode, generate the necessary
        // objects then add them back to the .parentNode
    }
    else {
        if (node.childNodes.length) {
            for (let i=0; i<node.childNodes.length; i++) {
                walkAndReplace(node.childNodes[i]); // recurse
            }
        }
    }
}

walkAndReplace(document.body);