获取 div 的内容，包括输入值

Question

我正在通过正则表达式的输入替换某些特定字符。

Div 看起来像这样：

1)<div>Text text text text <input> text text <input> text</div>

2)<div>text Text <input> text <input> text text Text</div>

是否可以从 div 中获取包括输入值在内的整个文本（在我的例子中，id 为“body”）？

jQuery 代码：

var body = data.body.replace(/\.\.\./g, "<input class='bodyy' type='text' size='2' />");
$("#body").html(body);

小提琴：https://jsfiddle.net/uepf87fc/

Answer 1

你可以自己用函数解析，这里是一个例子：

function getTextWithInputValues(id) {
    var element = document.getElementById(id);
    if (!element) {
        return null;
    }

    var elementText = element.innerHTML; // Get the entire text from your element

    var elementInputs = element.getElementsByTagName('input'); // fetch all inputs from your element

    // replace all input fields with their respective values
    Object.getOwnPropertyNames(elementInputs).forEach(
        (input) => {
            var inputText = elementInputs[input].outerHTML;
            if (elementText.search(inputText) > 0) {
                elementText = elementText.replace(inputText, elementInputs[input].value);
            }
        }
    );

    return elementText;

}

您可以在此处通过打开控制台进行测试，粘贴此代码，然后在页面顶部的搜索框中输入内容（不要点击搜索，只需输入内容），然后当您调用控制台中的函数，如getTextWithInputValues('search')，它将输出类似

的内容

<svg ......</svg>
your-text-here
<button .....</button>

希望这会有所帮助。

Answer 2

即使您要求REGEX，我认为无论如何都不需要。

这将返回数组中的数据。第一个索引是正文，然后是每个输入字段的值。

var values = [];
values.push($('#body').text());

var inputs = $('#body input');

for(var i = 0; i < $(inputs).length; i++)
{
    var currentElement = $(inputs)[i];
    values.push($(currentElement).val());
}


console.log(values);