Question

<div id=""> <span>{{msg}}</span> </div>

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

演示JavaScript示例： <script> var msg = "This is update data"; {{msg}}.parentElement.innerHTML=msg; </scritp>

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

Answer 1

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

        <dependency>
            <groupId>org.apache.hive</groupId>
            <artifactId>hive-jdbc</artifactId>
            <version>1.2.1</version>
        </dependency>
        <dependency>
            <groupId>org.apache.hadoop</groupId>
            <artifactId>hadoop-common</artifactId>
            <version>2.7.3</version>
        </dependency>

在javascript中：

var msg = "This is update data";

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

现在，您已经在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; } }中找到了该元素，现在可以更改其文本

found

Answer 2

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

.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标记（例如<span {{ msg > hello </ }} span>）的中间，就可以了。

重绘整个页面可能会导致性能下降，但是如果您并非一直这样做（动画），则通常不会注意到它。无论如何，如果您担心性能，请始终对您的代码进行基准测试。

一种更微妙的方法是仅在文本节点上进行操作，因此我们不会偶然弄乱真实的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);

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

2 个答案: