以编程方式附加内容而不会丢失 html 标签

Question

下面这个脚本有一些问题：

<article>
  Si potrebbe comunemente pensare che i passaporti americani e britannici siano più potenti, da un punto di vista turistico, rispetto a quelli degli altri Paesi del mondo. Nel senso che permettano più accessi senza bisogno di visto. In realtà non è vero, e lhanno scoperto quelli della ditta britannica Henley & Partners sui visti Partners Index, utilizzando i dati del International Air Transport Association (IATA).
 <br>
 <br> Sono i tedeschi, in base a questi dati, ad avere i passaporti più forti, che danno loro l'accesso senza visto a 177 Paesi. L'indice classifica 199 Paesi in base alla libertà di viaggio che ognuno di questi offre ai suoi cittadini su un massimo di 218.</article>

Javascript

var know = "che;più";

function CheckKnowWords() {
  if (know != null) {
    know = know.split(";");
    var words = $("article").text().split(" ");
    $("article").empty();
    $.each(words, function(i, v) {

      if (know.indexOf(v) > -1) {
        IKnow = "true";
      } else {
        IKnow = "false";
      }

      if (IKnow == "true") {
        $("article").append(" ");
        $("article").append(v + " ");
      } else {
        $("article").append(" ");
        $("article").append($("<span style='border-radius: 4px;border: 1px solid #ffcccc; background: #ffcccc;'>").text(v));
      }
    });
  } else {
    var words = $("article").text().split(" ");
    $("article").empty();
    $.each(words, function(i, v) {
      $("article").append(" ");
      $("article").append($("<span style='border-radius: 4px;border: 1px solid #ffcccc; background: #ffcccc;'>").text(v));
    });
  }
}

这里有一个 jsfiddle 链接：https://jsfiddle.net/fabiobraglin/ww7uLvd1/1/

这个脚本可以很好地识别单词，但是我丢失了 HTML 标签，例如<br> 或 <b>...我怎么能做同样的事情，但不改变里面的 HTML 标签文字？

Answer 1

只需将您的 .text 更改为 .html 就可以了：

var know = "che;più";

function CheckKnowWords() {
  if (know != null) {
    know = know.split(";");
    var words = $("article").html().split(" ");
    $("article").empty();
    $.each(words, function(i, v) {
      for (var j = 0; j < know.length; j++) {
        if (know[j].match(v)) {
          IKnow = "true";
        } else {
          IKnow = "false";
        }
      }
      if (IKnow == "true") {
        $("article").append(" ");
        $("article").append(v + " ");
      } else {
        $("article").append(" ");
        $("article").append($("<span style='border-radius: 4px;border: 1px solid #ffcccc; background: #ffcccc;'>").html(v));
      }
    });
  } else {
    var words = $("article").html().split(" ");
    $("article").empty();
    $.each(words, function(i, v) {
      $("article").append(" ");
      $("article").append($("<span style='border-radius: 4px;border: 1px solid #ffcccc; background: #ffcccc;'>").html(v));
    });
  }
}