Question

我正在构建一个JavaScript搜索应用程序，它接受一个文本字符串并使用跨度将其分成多个部分。一个单独的函数将搜索整个文本或仅搜索之前识别的部分之一。

我的问题是，当我在识别部分后尝试突出显示文本时。我无法弄清楚如何突出显示多个跨度中包含的文本。

例如，如果我有字符串。

<div id="container">
  <span id="sectionOne">This is my first section</span> 
  and 
 <span id="sectionTwo">This is my second section</span>
</div>

如何突出显示包含在两个跨度中的section and This以及文本元素？

感谢您的帮助。如果可以在纯JavaScript中执行此操作，那将是最有帮助的;虽然，非常感谢任何解决方案。

Answer 1

<input type="text" id="search" />
<div id="container"> <span id="sectionOne">This is my first section</span>  <span id="sectionTwo">This is my second section</span>

</div>
<div id="output"></div>

JS

$('#search').keyup(function () {
    var self = $(this);
    var src_str = $("#container").html();
    var term = $('#search').val();
    term = term.replace(/(\s+)/, "(<[^>]+>)*$1(<[^>]+>)*");
    var pattern = new RegExp("(" + term + ")", "gi");

    src_str = src_str.replace(pattern, "<mark>$1</mark>");
    src_str = src_str.replace(/(<mark>[^<>]*)((<[^>]+>)+)([^<>]*<\/mark>)/, "$1</mark>$2<mark>$4");

    $("#output").html(src_str);
});

Fiddle

Answer 2

我设法通过解析字符串并将各个部分存储在具有位置值的对象中来获得一些工作。当我想搜索单个部分时，我只需在我的对象中搜索，然后替换原始输入的正确部分。

我确信有一种更好的方法可以解决问题，但将字符串分解为内部对象是唯一可以让它工作的方法。

突出显示多个相邻元素中包含的文本

2 个答案: