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

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

1 个答案: