1

好的，

所以我有下面的 JQuery 代码，它改变了 dt 元素的背景颜色，它分配了一个特定的类：

var match = $('.matchedOn:contains("' + matchedString + '")');
                       $(match).html($(match).html().replace(matchedString, "<span 
   style='background-color:#FFFF00'>" + matchedString + "</span>"));

这是 $.each 循环的一部分，如果循环经过一次迭代，它似乎可以工作。例如，我有一个返回的数据集，其中有两个可能的匹配项需要突出显示。为了证明这一点，我将模拟一些示例文本，它将形成循环。

第一次迭代：字符串匹配字符串 = 你好

第二次迭代：字符串匹配字符串 = 世界

这两个字符串都在同一个 dt 元素中，例如：

'这是 Hello World 示例字符串'

上面的 JQuery 代码似乎只突出了“Hello”这个词，而不是“World”

任何想法为什么？我调试并单步执行代码，我可以看到两个matchedString 变量都设置正确。

编辑 好的，抱歉耽搁了，我已经设法掌握了有问题的代码，这将有助于答案。

$.ajax({
           type: "POST",
           url: "Default.aspx/GetPopUpData",
           cache: false,
           data: JSON.stringify({ messageId: messageId, messageType: messageType, aml: true }),
           contentType: "application/json; charset=utf-8",

           dataType: "json",
           error: function (xhr) {

               var contentType = xhr.getResponseHeader("Content-Type");
               if (xhr.status === 401 && contentType.toLowerCase().indexOf("text/html") >= 0) {
                   window.location.reload();
               }
           },
           success: function (msg) {

               var mtData = msg.d[0];

               var tag13C = '';
               var tag33BSeqB = '';
               var tag50 = '';
               var tag50SeqB = '';
               var tag52 = '';
               var tag52SeqB = '';
               var tag53 = '';
               var tag54 = '';
               var tag55 = '';
               var tag56 = '';
               var tag56SeqB = '';
               var tag57 = '';
               var tag57SeqB = '';
               var tag58 = '';
               var tag59 = '';
               var tag59SeqB = '';
               var tag70 = '';
               var tag70SeqB = '';
               var tag72 = '';
               var tag72SeqB = '';
               var tag77B = '';
               var violationCount = '';

               if (messageType == "202") {
                   if (mtData["Tag13C"].length) {
                       tag13C = $.map(mtData["Tag13C"], function (ele) { return '<dd>' + ele; }).join('');
                   }
                   if (mtData["Tag52"].length) {
                       tag52 = $.map(mtData["Tag52"], function (ele) { return '<dd>' + ele; }).join('');
                   }
                   if (mtData["Tag53"].length) {
                       tag53 = $.map(mtData["Tag53"], function (ele) { return '<dd>' + ele; }).join('');
                   }
                   if (mtData["Tag54"].length) {
                       tag54 = $.map(mtData["Tag54"], function (ele) { return '<dd>' + ele; }).join('');
                   }
                   if (mtData["Tag56"].length) {
                       tag56 = $.map(mtData["Tag56"], function (ele) { return '<dd>' + ele; }).join('');
                   }
                   if (mtData["Tag57"].length) {
                       tag57 = $.map(mtData["Tag57"], function (ele) { return '<dd>' + ele; }).join('');
                   }
                   if (mtData["Tag58"].length) {
                       tag58 = $.map(mtData["Tag58"], function (ele) { return '<dd class=matchedOn>' + ele; }).join('');
                   }
                   if (mtData["Tag72"].length) {
                       tag72 = $.map(mtData["Tag72"], function (ele) { return '<dd>' + ele; }).join('');
                   }
                   if (mtData["Tag50SeqB"].length) {
                       tag50SeqB = $.map(mtData["Tag50SeqB"], function (ele) { return '<dd>' + ele; }).join('');
                   }
                   if (mtData["Tag52SeqB"].length) {
                       tag52SeqB = $.map(mtData["Tag52SeqB"], function (ele) { return '<dd>' + ele; }).join('');
                   }
                   if (mtData["Tag56SeqB"].length) {
                       tag56SeqB = $.map(mtData["Tag56SeqB"], function (ele) { return '<dd>' + ele; }).join('');
                   }
                   if (mtData["Tag57SeqB"].length) {
                       tag57SeqB = $.map(mtData["Tag57SeqB"], function (ele) { return '<dd>' + ele; }).join('');
                   }
                   if (mtData["Tag59SeqB"].length) {
                       tag59SeqB = $.map(mtData["Tag59SeqB"], function (ele) { return '<dd>' + ele; }).join('');
                   }
                   if (mtData["Tag70SeqB"].length) {
                       tag70SeqB = $.map(mtData["Tag70SeqB"], function (ele) { return '<dd>' + ele; }).join('');
                   }
                   if (mtData["Tag72SeqB"].length) {
                       tag72SeqB = $.map(mtData["Tag72SeqB"], function (ele) { return '<dd>' + ele; }).join('');
                   }

                   $('<div class=message><pre><dl><dt>Transaction Reference:</dt><dd>' + mtData["Tag20"] +
                     '</dd><dt>Related Reference:</dt><dd>' + mtData["Tag21"] +
                     '</dd>' + (tag13C ? '<dt>Time Indication:</dt><dd>' + tag13C : '') +
                     '</dd><dt>Value Date / Currency Code / Amount:</dt><dd>' + mtData["Tag32"] +
                     '</dd>' + (tag52 ? '<dt>Ordering Institution:</dt><dd>' + tag52 : '') +
                     '</dd>' + (tag53 ? '<dt>Senders Correspondent:</dt><dd>' + tag53 : '') +
                     '</dd>' + (tag54 ? '<dt>Receivers Correspondent:</dt><dd>' + tag54 : '') +
                     '</dd>' + (tag56 ? '<dt>Intermediary:</dt><dd>' + tag56 : '') +
                     '</dd>' + (tag57 ? '<dt>Account With Institution:</dt><dd>' + tag57 : '') +
                     '</dd>' + (tag58 ? '<dt>Beneficiary Institution:</dt><dd>' + tag58 : '') +
                     '</dd>' + (tag72 ? '<dt>Sender to Receiver Information:</dt><dd>' + tag72 : '') +
                     '</dd><dt>Ordering Customer:</dt><dd>' + tag50SeqB +
                     '</dd>' + (tag52SeqB ? '<dt>Ordering Institution:</dt><dd>' + tag52SeqB : '') +
                     '</dd>' + (tag56SeqB ? '<dt>Intermidary Institution:</dt><dd>' + tag56SeqB : '') +
                     '</dd>' + (tag57SeqB ? '<dt>Account With Institution:</dt><dd>' + tag57SeqB : '') +
                     '</dd>' + (tag59SeqB ? '<dt>Beneficiary Customer:</dt><dd>' + tag59SeqB : '') +
                     '</dd>' + (tag70SeqB ? '<dt>Remittance Information:</dt><dd>' + tag70SeqB : '') +
                     '</dd>' + (tag72SeqB ? '<dt>Sender to Receiver Information:</dt><dd>' + tag72SeqB : '') +
                     '</dd>' + (tag33BSeqB ? '<dt>Currency / Instructed Amount:</dt><dd>' + tag33BSeqB : '') +
                     '</dd></dl></pre></div>').appendTo('#mt202');

               }

               var amlData = msg.d[1];

               if (amlData.length) {

                   $.each(amlData, function (index, item) {
                       var countries = ''; // intialize as empty string
                       var aka = '';
                       var identNum = '';
                       var listReason = '';
                       var names = '';

                       var reportCount = index + 1;

                       if (item.Countries.length) {
                           countries = $.map(item.Countries, function (ele) { return '<dd>' + ele; }).join('');
                       }

                       if (item.Aka.length) {
                           aka = $.map(item.Aka, function (ele) { return '<dd>' + ele; }).join('');
                       }

                       if (item.IdentNumbers.length) {
                           identNum = $.map(item.IdentNumbers, function (ele) { return '<dd>' + ele; }).join('');
                       }

                       if (item.ListingReasons.length) {
                           listReason = $.map(item.ListingReasons, function (ele) { return '<dd>' + ele; }).join('');
                       }

                       if (item.Names.length) {
                           names = $.map(item.Names, function (ele) { return '<dd>' + ele; }).join('');
                       }

                       var matchedItem = item.MatchedItem.trim();
                       var matchedTag = item.MatchedTag;
                       var senderBic = item.SenderBIC.trim();


                       var match = $('.matchedOn:contains("' + matchedTag + '")');
                       $(match).html($(match).html().replace(matchedTag, "<span style='background-color:#FFFF00'>" + matchedTag + "</span>"));




                   });

               }

               else {
                   $('<h2>Violation Report(' + amlData.length + ')</h2>').appendTo('#AMLresults');
               }
           }

       });

       $('#myModal').modal();

希望这可以帮助

编辑

因此，第一个循环创建单个 div，其内容包含 dt 和 matchOn 类。第二个循环可以包含更多的命中，用于显示 aml 命中。

所以在 Tag58 中，“这是一个测试用例，请突出显示我”这个词被写入模态框。然后 aml 循环有matchedTag，所以第一次命中是“测试用例”，因此任何包含matchedOn 类的标签都需要有这个测试突出显示，依此类推。

4

3 回答 3

2

如果你不介意替代品，那么看看WORKING FIDDLE

你可以用来RegExp完成任务。我从我最喜欢的问题highlight-a-word-with-jquery中找到了它，其中@Andrew Hedges建议 -

function hiliter(word, element) {
    var rgxp = new RegExp(word, 'g');
    var repl = '<span class="myClass">' + word + '</span>';
    element.innerHTML = element.innerHTML.replace(rgxp, repl);
}
hiliter('dolor');

对于您的代码，它将类似于：-

var stringArray = ["Lorem", "Ipsum", "dummy"];

   function highlight_words(word, element) {
       var rgxp = new RegExp(word, 'g');
       var repl = '<span style="background-color:#FFFF00">' + word + '</span>';
       element.innerHTML = element.innerHTML.replace(rgxp, repl);
   }
   $.each(stringArray, function (index, value) {
       var matchedString = value;
       var element = document.getElementsByClassName('matchedOn');
       highlight_words(matchedString, element[0]);
   });

甚至你可以看看jquery.highlight

于 2013-10-28T11:23:05.897 回答
0

Shubh Dasgupta 的回答已经足够好了，但是那里有一个 CaSe SeNsiTivitY 问题，使用一个类似['I', 'Love', ' Ponies']它的数组将替换i LOVE Ponies为I Love Ponies- 一个风格上重要的区别。

无论如何，这是另一个不干扰大小写的正则表达式反刍：jsfiddle.net/h7Zf2/4 该解决方案基本上是从https://stackoverflow.com/a/1230491/694325复制的

那里使用了两种不同的方法，用实际内容进行测试，看看哪一种更适合你。也很大程度上取决于目标语言。对于英语，这比德语或芬兰语更容易，例如：对于高亮Leben和Partner，应该发生Lebensabschnittpartner!什么？或者用英语Lovevs Lovely: hilight or not？

于 2013-10-28T12:14:03.793 回答
0

我认为您的循环中有问题...很难说，因为我们没有看到您拥有的 html 或循环。

我开始重现这个问题并首先使它像这样 - http://jsfiddle.net/h7Zf2/1/。我插入了一个警报，表明它有点停止第一次迭代（只有一个单词被突出显示）并且在单击警报后 - 第二个单词突出显示。

这使我找到了解决您问题的可能方法。我将字符串保存在数组中并迭代文本以替换数组中的单词：http: //jsfiddle.net/h7Zf2/2/

var matchedString = ['ipsum', 'dolor', 'odio'];
for( var i = 0; i <= matchedString.length; i++ ) {
    var match = $('.matchedOn:contains("' + matchedString[i] + '")');
    match.html(match.html().replace(matchedString[i], "<span style='background-color:#FFFF00'>" + matchedString[i] + "</span>"));
}

希望你能在这里找到有用的东西:)

于 2013-10-28T10:56:37.160 回答