Javascript string replace all span

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}}

Any attempts from your side ?

Suresh Atta
– Suresh Atta

2017-04-10 06:17:58 +00:00
Commented Apr 10, 2017 at 6:17 — Suresh Atta
– Suresh Atta, Commented Apr 10, 2017 at 6:17
replace span with what? or replace text ?

Gaurav Chaudhary
– Gaurav Chaudhary

2017-04-10 06:20:21 +00:00
Commented Apr 10, 2017 at 6:20 — Gaurav Chaudhary
– Gaurav Chaudhary, Commented Apr 10, 2017 at 6:20

Mulan · Accepted Answer · 2017-04-10 06:37:56Z

1

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

answered Apr 10, 2017 at 6:37

Mulan

136k35 gold badges240 silver badges276 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

guest271314 · Accepted Answer · 2017-04-10 06:36:38Z

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>

Mayank Raj · Accepted Answer · 2017-04-10 06:39:03Z

0

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

edited Apr 10, 2017 at 6:39

answered Apr 10, 2017 at 6:30

Mayank Raj

1,62412 silver badges13 bronze badges

Collectives™ on Stack Overflow

Javascript string replace all span

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related