Javascript 将多个输入值附加到div的特定位置

目标：使用户能够将表单字段链接到来自不同div的内容中的特定位置，然后将各个输入字段的文本分别附加到这些特定位置

HTML:

在小提琴中，单击文本“asd”，这将使您能够键入任何内容。您将看到，一旦在“One:”旁边的输入标记中输入值，它将根据需要替换文本。我现在能想到的是，键入一个括在方括号中的“标记”，然后函数将标记与输入的标签attr“for”进行比较，并用输入值替换它。这其中有一个主要缺陷：用户每次想要更改值时，都必须对相同的输入进行一次又一次的标记，这使得表单变得无用，因为他们为什么不直接键入信息而不是使用表单呢

---

这与stackoverflow本身在文本框中创建链接标记、图像标记等的方式非常接近（如果不是完全相同的话）。

您想要实现的功能类似于Angular JS，在文本框中键入时会发生实时更新

---

如果没有，则可以使用oninput事件。您可以在“Asd”旁边放置一个span标记或占位符，只需将占位符innertext替换为控件的文本即可

如果您要降低评分，至少添加一条注释。

<form>
    <div>
        <label for="1">One:</label>
        <input type="text" id="1" />
    </div>
    <div>
        <label for="2">Two:</label>
        <input type="email" id="2" />
    </div>
    <div>
        <label for="3">Three:</label>
        <input type="email" id="3" />
    </div>
    <div>
        <label for="4">Four:</label>
        <input type="email" id="4" />
    </div>
    <div>
        <label for="5">Five:</label>
        <input type="email" id="5" />
    </div>
    <div>
        <label for="6">Six:</label>
        <input type="email" id="6" />
    </div>
    <div>
        <label for="7">Seven:</label>
        <input type="email" id="7" />
    </div>
</form>

<div class="text-area">
    <p>asd</p>
    <p>asd</p>
    <p>asd</p>
    <p>asd</p>
    <p>asd</p>
    <p>asd</p>
    <p>asd</p>
</div>

    function replaceText() {
        var thisvalue = $(this).val();
        var thisattr = $(this).siblings('label').attr('for');
        //alert(thisvalue);
        $('.text-area p').each(function(){
        $(this).text(function () {
        return $(this).text().replace("["+thisattr+"]", "["+thisvalue+"]"); 
            }); 
        });
    }