CODEWITHSUNDEEP
javascriptjqueryhtmlstringtwitter-bootstrap
gonzalo2000
gonzalo2000

Reputation: 648

Replace string for html element

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>

Upvotes: 0

Views: 352

Answers (1)

Ori Drori
Ori Drori

Reputation: 191976

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>

Upvotes: 1

Related Questions