JavaScript字符串替換所有跨度

Question

我有一個HTML字符串，我想更換包含替換文本類的所有跨度

var html = '<span class="replace_text" id="58d4aa82c887136a08dbedf5" contenteditable="false">mcq</span>Hello<span class="replace_text" id="58d4aa82c887136a08dbedf4" contenteditable="false">mcq</span>Other string charatcter'; 

預期成果是：

{{58d4aa82c887136a08dbedf5}}Hello{{58d4aa82c887136a08dbedf4}}Other string charatcter

方式：

{{span_id}}middle string{{span_id}} 

Answer 1

從我的理解，你想給span元素innerText它是id屬性。

在這裏你去：

var html = '<span class="replace_text" id="58d4aa82c887136a08dbedf5" contenteditable="false">mcq</span> Hello <span class="replace_text" id="58d4aa82c887136a08dbedf4" contenteditable="false">mcq</span> Other string charatcter'; 
 

 
$('#container').html(html); 
 

 
$('.replace_text').each(function() { 
 
    // We iterate over all such elements 
 

 
    $(this).text('{{' + $(this).attr('id') + '}}'); // We get vaue in the id attribute and add it to the span 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id='container'></div>

正如您所標記的使用jQuery的答案，我已經給使用相同的

Answer 2

您可以創建一個元素我的解決方案，設置爲.innerHTML至html，使用.find()$.map()重複span元素，返回span.id和.nextSibling.textContent，請在結果數組上調用.join()並使用參數""從數組創建字符串。

var html = '<span class="replace_text" id="58d4aa82c887136a08dbedf5" contenteditable="false">mcq</span>Hello<span class="replace_text" id="58d4aa82c887136a08dbedf4" contenteditable="false">mcq</span>Other string charatcter'; 
 

 
var res = $.map($("<div>", {html:html}).find("span"), function(el) { 
 
      return "{{" + el.id + "}}" + el.nextSibling.textContent 
 
      }).join(""); 
 

 
$("body").append(res);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

我會建議建立一個虛設的元素，並使用DOM API。任何解析/修改HTML字符串的正則表達式解決方案都是垃圾。

const prepareHtml = html => { 
 
    var fragment = document.createElement('div') 
 
    fragment.innerHTML = html 
 
    for (let span of fragment.querySelectorAll('span.replace_text')) 
 
    span.innerHTML = `{{${span.id}}}` 
 
    return fragment.innerText 
 
} 
 

 
var html = '<span class="replace_text" id="58d4aa82c887136a08dbedf5" contenteditable="false">mcq</span>Hello<span class="replace_text" id="58d4aa82c887136a08dbedf4" contenteditable="false">mcq</span>Other string charatcter' 
 

 
console.log(prepareHtml(html)) 
 
// {{58d4aa82c887136a08dbedf5}}Hello{{58d4aa82c887136a08dbedf4}}Other string charatcter