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