javascript - jQuery多次重复替换innerHTML

Question

我有以下脚本可用于在innerHTML 中替换为jQuery。

HTML 代码

<input type="submit" name="replace" id="replace" value="Replace" />

<div class="my_div">Default1 content1</div>
<div class="my_div">Default2 content2</div>

java脚本

$('#replace').click(function() {
   $('.my_div').html(function( idx, oldHtml){
      return oldHtml.replace(/Default1|content1|Default2|content2/gi, 'symbol1');
   });
});

但我无法修改脚本以进行多个唯一替换。我要替换的示例

默认1到符号1

默认2到符号2

内容1到符号3

内容2到符号4

以下内容不起作用

$('#replace').click(function() {
   $('.my_div').html(function( idx, oldHtml){
      return oldHtml.replace(/Default1/gi, 'symbol1');
      return oldHtml.replace(/Default2/gi, 'symbol2');
      return oldHtml.replace(/content1/gi, 'symbol3');
      return oldHtml.replace(/content2/gi, 'symbol4');
   });
});

我还有一个基于 id 属性的早期脚本，其中有超过 500 行替换行。我是否可以在这个新的 jQuery 类属性中包含类似的结构？

var str=document.getElementById("my_id").innerHTML;
var n=str.replace("Default1","symbol1");
var n=str.replace("Default2","symbol2");
document.getElementById("my_id").innerHTML=n;
}

非常感谢，你们帮了我很多忙。 :)

Answer 1

问题 1:

替换

return oldHtml.replace(/Default1/gi, 'symbol1');
return oldHtml.replace(/Default2/gi, 'symbol2');
return oldHtml.replace(/content1/gi, 'symbol3');
return oldHtml.replace(/content2/gi, 'symbol4');

与

return oldHtml.replace(/Default1/gi, 'symbol1')
    .replace(/Default2/gi, 'symbol2')
    .replace(/content1/gi, 'symbol3')
    .replace(/content2/gi, 'symbol4');

问题 2:

替换

var str=document.getElementById("my_id").innerHTML;
var n=str.replace("Default1","symbol1");
var n=str.replace("Default2","symbol2");
document.getElementById("my_id").innerHTML=n;

与

var $div = $('#my_id');
$div.html(
    $div.html().replace("Default1","symbol1")
    .replace("Default2","symbol2")
);

(如果您使用 jQuery，则不需要那些 getElementById)