替换html元素的字符串

时间:2017-11-08 20:19:35

标签: javascript jquery html string twitter-bootstrap

我正在处理随机选择的数组字符串的控制流程。如果字符串包含我的一个测试用例,它会转换为" ??? &#34 ;.为了增强演示,我想将其更改为bootstrap glyphicon。我目前正在使用.replace()将字符串修改为另一个字符串:有没有办法将字符串修改为span元素?

我已经查看.replace()和other关于similar主题的问题的文档,但到目前为止我还没有能够应用解决方案。

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();

html包含:

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

1 个答案:

答案 0 :(得分:1)

用span文本替换字符串,并使用.html(),jQuery将字符串转换为html内容:

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>