Javascript字符串替换所有范围

Question

I have an HTML string and I want to replace all span that contain replace text class

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';

Expected Output is:

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

Means:

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

Answer 1

From what I understand, you want to give the span element the innerText of it's id attribute.

Here you go :

 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> 

As you've tagged the answer with jQuery, I've given my solution using the same

Answer 2

You can create an element, set .innerHTML to html , use .find() $.map() to iterate span elements, return span .id and .nextSibling .textContent , call .join() with parameter "" on resulting array to create string from array.

 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

I would recommend creating a dummy element and using the DOM api. Any regexp solution to parse/modify HTML strings is trash.

 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