替換掉陣列

Question

使用$('div#top_container').html()設置字符串，我得到以下爲例：

<div class="top" id="top_container"> 
    <div class="example">First</div> 
    <div class="example">Second</div> 
</div> 

給...

<div class="example">First</div> 
<div class="example">Second</div> 

在這裏，用.replace()，我想*%^%更換<div class="example"> （隨機字符集）並刪除</div>：

var content = $('div#top_container').html();     
var clean_1 = content.replace('<div class="example">','*%^%'); //add $*!#$ 
var clean_2 = clean_1.replace('</div>',' '); //remove </div> 

給...

console.log(clean_2); --> *%^%First*%^%Second 

現在，example div元素的數量可以改變，我需要先找出如何定位他們。還有一個更清潔的方式同時針對<div class="example">和</div>？

編輯：

我並不想改變HTML本身，而是要讓編輯過的版本作爲一個變量，我可以做的東西用（如發送通過AJAX到PHP）。

我該怎麼做？

Answer 1

使用replaceWith()方法使用回調並通過使用text()方法獲取文本內容來生成首選文本字符串。

$('div.example').replaceWith(function(v) { 
 
    return '%^%' + $(this).text(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div class="example">First</div> 
 
    <div class="example">Second</div> 
 
</div>

---

UPDATE：如果你不想更新原有的元素，然後使用clone()並做其餘的認爲克隆的元素。

var res = $('#parent') 
 
    // clone element 
 
    .clone() 
 
    // get element with `example` class 
 
    .find('.example') 
 
    // update content 
 
    .replaceWith(function(v) { 
 
    return '%^%' + $(this).text(); 
 
    }) 
 
    // back to previos selector and get html content 
 
    .end().html(); 
 

 
console.log(res)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="parent"> 
 
    <div class="example">First</div> 
 
    <div class="example">Second</div> 
 
</div>

Answer 2

可以使用replaceWith功能

$(function() { 
    $(".example").replaceWith(function(){ 
    return "%^%"+$(this).text(); 
    }); 
}); 

可以使容器的副本，如果你不想改變原有的股利。

var html=""; 
$(function() { 
var newHtml = $("#top_container").clone(); 
$(newHtml).find(".example").replaceWith(function() { 
    html+= "%^%" + $(this).text(); 
    }); 
}); 

console.log(html); 

Answer 3

創建一個原型，如：

String.prototype.replaceAll = function (toReplace, replaceWith){ 
    return this.split(toReplace).join(replaceWith); 
} 

和jQuery代碼是這樣的：

$("div#top_container").each(function(i) {debugger; 
    console.log(this.innerHTML.replaceAll('<div class="example">','*%^%').replaceAll('</div>',' ');) 
    });