Question

搜索文字时，它会查找并突出显示正确的文字，但会清除其他元素，例如<p>，<ul>，<b>，<strong>。所有元素都被删除/清除！

HTML ：

<div class="ray-search">
  <div class="field" id="ray-search-form">
    <input type="text" id="searchfor" placeholder="what are you searching for?" />
    <button type="button" id="search">Press to Find!</button>
  </div>
</div>

<article id="ray-all_text">
  <p>
    This manual and web site, all information and data and photos contained herein, are the s...
  </p>
</article>

JS ：

setTimeout(function() {
  $('button#search').click(function() {
    var page = $('#ray-all_text');
    var pageText = page.text().replace("<span>", "").replace("</span>");
    var searchedText = $('#searchfor').val();
    var theRegEx = new RegExp("(" + searchedText + ")", "igm");
    var newHtml = pageText.replace(theRegEx, "<span>$1</span>");

    page.html(newHtml);
    $('html, body').animate({
      scrollTop: $("#ray-all_text span").offset().top
    }, 2000);
  });
}, 1000);

请检查JSFiddle示例：https://jsfiddle.net/8snb3o4h
为什么会这样？有解决方案吗？

Answer 1

text()删除所有标记。 html()会保持原样。

变化：

var pageText = page.text().replace("<span>", "").replace("</span>");

到

var pageText = page.html().replace("<span>", "").replace("</span>");

更新了小提琴：https://jsfiddle.net/gaezs6s8/

text()

获取匹配元素集合中每个元素的组合文本内容，包括它们的后代，或者设置匹配元素的文本内容。

html()

获取匹配元素集中第一个元素的HTML内容，或者设置每个匹配元素的HTML内容。

通过搜索查找文本并突出显示获取错误

1 个答案: