Question

我想通过jquery突出显示文本，但我再也想不通了。实际上，当我在输入框中搜索时，我从API获得了html元素。但是它返回包含html标签作为响应，所以我不想高亮html tag。我想只突出显示来自该api响应的文本。请看下面的内容，我只想从@dd仅突出显示a tag。

var fromAPI = '<p><span data-email="dd@gmail.com" data-id="24" data-label="@dd" class="mention"><a>@dd</a></span> </p>';
var search = "@dd";
var final = hl(fromAPI);
function hl(p) {
  if(/<[a-z][\s\S]*>/i.test(p)) {
    p = $(p).attr('id','ddd');
    p = $(p).html($(p)[0].outerHTML);
    hl(p);
  } else {
    var pattern = new RegExp("("+search+")","gi");
    p = $(p).html().replace(pattern, "<mark>$1</mark>");
    $(p).html($(p)[0].outerHTML);
  }
  return p;
}
console.log($(final).html());

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

实际结果：

<a>@dd</a> 

预期结果：

<a>@dd</a> 

Answer 1

您的代码正在处理大多数部分，您只是通过递归调用函数SELECT act.REFERENCENO, act.CUSTOMER, act.ATDATE TransDate, act.SALESTYPE, cust.STDTERMS, SUM(IFNULL(act.TOTALAMOUNT, 0) - IFNULL(act.DISCOUNTAMNT, 0)) AS Amount, YEAR(act.ATDATE) AS intYear FROM 100_actual_transaction act INNER JOIN 000_customer cust ON (act.CUSTOMER = cust.CUSTOMERNAME) WHERE (act.REFERENCENO IS NOT NULL AND act.CUSTOMER LIKE theCustomer AND act.SALESTYPE LIKE theSalesType AND (YEAR(act.ATDATE)IN (intYear,intYear1,intYear2,intYear3,intYear4)) ); GROUP BY act.REFERENCENO, act.CUSTOMER, act.ATDATE TransDate, act.SALESTYPE, cust.STDTERMS, YEAR(act.ATDATE)犯了一个错误。问题是以下代码：

h1

您将var final = hl(fromAPI); hl(p);设置为函数final的返回值，但该函数再次调用自身，失去对变量的回调。

我将您的代码复制到JSFiddle并进行了更改，以便您自己尝试： https://jsfiddle.net/qg6ffpLg/

我刚刚用你的else语句中的确切代码替换了h1（只是一个示例，告诉你代码的工作原理除了你调用函数两次的部分。

Answer 2

我通过在每个子元素中给出temp id来解决，如下所示。目前这解决了我的问题。如果有更好的解决方案，请与我分享!!

$(document).ready(function(){
    var fromAPI = '<p><span data-email="dd@gmail.com" data-id="24" data-label="@dd" class="mention"><a>@dd</a></span> </p>';
    var search = "@dd";
    var last = highlight.init(fromAPI,search);
    console.log(last);
});
    //highlight text object
    var highlight = {
      _id : 'highlight_search_result_history-',
      childNode : 0,
      search : '',
      init : function(d,sKey) {
         $("<div id='"+this._id+"'>").html(d).appendTo("body");
         highlight.search = sKey;
         this.result('#'+this._id);
         return this.finalize();
      },
      result : function(p) {
          var id = this._id + (this.childNode++);
          var p = $(p).children();
          $(p).attr('id',id);
          if(/<[a-z][\s\S]*>/i.test($(p).html())) {
            this.result('#'+id);
          } else {
            var pattern = new RegExp("("+highlight.search+")","gi");
            var highlightText = $(p).text().replace(pattern, "<mark>$1</mark>");
            $(p).html(highlightText);
          }
      },
      finalize : function() {
         //remove temp id
         for(var j = 0;j <= this.childNode;j++) {
             $("#"+this._id+j).removeAttr("id");
         }
         var highlightText = $("#"+this._id).html();
         //delete temp id
         $("#"+this._id).remove();
         return highlightText;
      }
    };

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

从嵌套的html中突出显示文本？

2 个答案: