Trying to display js variables in html body [duplicate]

I’m trying to make every JS variables usable in the HTML body. I’m trying to make it works for every variables declared, I don’t want to make extra code when declaring a variable in order to make it able to run on HTML body.

First, I decided the way variables could be used in the HTML code,I decided to display variables by putting “..” before the name of the variable in the HTML tag. For example <p>..variable</p>

I achieved to make a query that looks for every DOM who have “..” in their content, store the variable without the “..” (so the name of the matching variable). But I’m blocked here, I would like to use the .replace jQuery property but I don’t know what to put inside? I’ll show you the code you’ll understand it better

$(document).ready(function() {
    var str = "string";

    $("*:contains('..')").each(function() {
        var vari = $(this).html();
        var vari = vari.slice(2);
        $(this).replace;
    })

})

In this example if we have <p>..str</p> in the body, since the variable str is declared it should replace it by “string” the content of the variable. But I’m block there, I don’t know what I should place inside the .replace, if I use the vari variable because it contains the name of the variable the user placed in the <p> tag, it will just display the name, while I would like to display the matching result of this variable.

Is there by miracle a function in Jquery that takes a variable’s output as a variable to display this variable’s value and not the first one?