如果在div中找到某些文本，则替换该文本(仅适用于最后一行)

Question

let maskElm = '#div-popUp';
setTimeout(function() {
$(maskElm).each(function() {
let text = $(this).html();
console.log(text);

$(this).html(text.replace('asID', 'DE ID (FFF)'));
$(this).html(text.replace('LG NAME', 'The Long Name'));
$(this).html(text.replace('TYPE', 'S12 Type'));
$(this).html(text.replace('TOWER424', 'Tower')); <-- only line that works as expected, rest ignored, why?
});
}, 50);

运行以上操作，只更新最后一个文本(按预期工作(。在我的maskElm弹出div中，所有上述字段都存在，甚至在我的console.log(text);中控制台的输出-但前3个文本替换被忽略。。我在这里错过了什么注意：我需要使用.html逐行执行，因为我不想丢失格式

我真的需要在每个文本值上添加一个if检查吗？我已经有大约20个其他字段需要添加。最佳路线

Answer 1

您可以使用一个新旧值数组来简化操作。您可以获取元素的HTML内容，循环遍历要替换的值，并在所有值都被替换后更新DOM：

let maskElm = "#div-popUp";
let toReplace = [
{ "asID": "DE ID (FFF)" },
{ "LG NAME": "The Long Name" },
{ "TYPE": "S12 Type" },
{ "TOWER424": "Tower" }
];
$(maskElm).each(function () {
let updatedHTML = $(this).html();
toReplace.forEach((item) => {
const [oldValue, newValue] = Object.entries(item)[0];
updatedHTML = updatedHTML.replace(oldValue, newValue);
});
$(this).html(updatedHTML);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div-popUp">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat aspernatur <b>TYPE</b> eligendi error in consectetur incidunt, <b>asID</b> voluptas autem dolorem deserunt <b>LG NAME</b> praesentium voluptatum eius, rerum magnam laborum id. Porro <b>TOWER424</b> nemo dolore aut.</div>

Answer 2

您应该在.repas 之后保存变量

let text = $(this).html();
text = text.replace('asID', 'DE ID (FFF)');
text = text.replace('LG NAME', 'The Long Name');
text = text.replace('TYPE', 'S12 Type');
text = text.replace('TOWER424', 'Tower');

然后写入元素：

$(this).html(text);