如果在 div 中找到，则替换某些文本仅在最后一行工作

如何解决如果在 div 中找到，则替换某些文本仅在最后一行工作

 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 个其他字段。最佳路线？

解决方法

你应该在 .repace 之后保存变量

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);

,

您可以拥有一组旧值和新值以使事情变得更容易。您可以获取元素的 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>