javascript - 替换数组中的字符串集

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>

---

更新:如果您不想更新原始元素，请使用 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>