jQuery多次重现取代innerHTML

时间:2012-10-28 09:58:07

标签: javascript jquery

我有以下脚本适用于在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');
   });
});

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

Default1到symbol1

Default2到symbol2

content1到symbol3

content2 to symbol4

以下不起作用

$('#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;
}

非常感谢,你们帮助了我很多。 :)

1 个答案:

答案 0 :(得分: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)