Replace string for html element

Question

I'm working on the control flow for a randomly selected array string. If the string includes one of my test cases, it converts to "??? ". To enhance the presentation, I would like to change it to a bootstrap glyphicon. I'm currently using .replace() to modify the string into a different one: is there a way to modify the string into a span element?

I've been going over the documentation for .replace() and other SO questions on similar topics, but I haven't been able to apply a solution thus far.

function setSentence() {
  // Return random int between min (included) and max (excluded)
  function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min)) + min;
  }

  const sentenceList = ["El mundo era tan reciente, que muchas cosas carecían de nombre, y para mencionarlas había que señalarías con el dedo.", "Melquíades, que era un hombre honrado, le previno: «Para eso no sirve.»", "Pero José Arcadio Buendía no creía en aquel tiempo en la honradez de los gitanos, así que cambió su mulo y una partida de chivos por los dos lingotes imantados.", "Úrsula Iguarán, su mujer, que contaba con aquellos animales para ensanchar el desmedrado patrimonio doméstico, no consiguió disuadirlo.", "«Muy pronto ha de sobrarnos oro para empedrar la casa», replicó su marido."];

  var sentence = sentenceList[getRandomInt(0, sentenceList.length)];
  var $sentence = $("#test-sentence");
  var testSentence = sentence;


  // instead of "??? " I would like to replace the identified text for <span class="glyphicon glyphicon-question-sign"></span> plus a space

  if (testSentence.includes("por ") || testSentence.includes("Por ")) {
    if (testSentence.includes("por ")) {
      testSentence = testSentence.replace("por ", "??? ");
    } else {
      testSentence = testSentence.replace("Por ", "??? ");
    }
  } else {
    if (testSentence.includes("para ")) {
      testSentence = testSentence.replace("para ", "??? ");
    } else {
      testSentence = testSentence.replace("Para ", "??? ");
    }
  }

  $sentence.text(testSentence);
}

setSentence();

The html contains:

<p><span id="test-sentence"></span></p>

side note, I would use string.indexOf(substring) !== -1 because string.includes() has poor browser support — Robbie Milejczak
– Robbie Milejczak, Commented Nov 8, 2017 at 20:38

Ori Drori · Accepted Answer · 2017-11-08 20:32:35Z

Replace the strings with the span text, and using .html(), jQuery will convert the string to html content:

function setSentence() {
  // Return random int between min (included) and max (excluded)
  function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min)) + min;
  }

  const sentenceList = ["El mundo era tan reciente, que muchas cosas carecían de nombre, y para mencionarlas había que señalarías con el dedo.", "Melquíades, que era un hombre honrado, le previno: «Para eso no sirve.»", "Pero José Arcadio Buendía no creía en aquel tiempo en la honradez de los gitanos, así que cambió su mulo y una partida de chivos por los dos lingotes imantados.", "Úrsula Iguarán, su mujer, que contaba con aquellos animales para ensanchar el desmedrado patrimonio doméstico, no consiguió disuadirlo.", "«Muy pronto ha de sobrarnos oro para empedrar la casa», replicó su marido."];

  var sentence = sentenceList[getRandomInt(0, sentenceList.length)];
  var $sentence = $("#test-sentence");
  var testSentence = sentence;


  // instead of "??? " I would like to replace the identified text for <span class="glyphicon glyphicon-question-sign"></span> plus a space

  if (testSentence.match(/por\b/i)) { // find por at end of words, ignore case
    testSentence = '<span>' + testSentence.replace(/\bpor\b/ig, "<span class=\"glyphicon glyphicon-question-sign\"></span>") + '</span>';
  } else if (testSentence.match(/para\b/i)) {  // find pata at end of words, ignore case
    testSentence = '<span>' + testSentence.replace("para ", "<span class=\"glyphicon glyphicon-question-sign\"></span>") + '</span>';
  }

  $sentence.html(testSentence);
}

setSentence();

.glyphicon::before {
  content: '?demo?'
}

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

<div id="test-sentence"></div>

Collectives™ on Stack Overflow

Replace string for html element

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related