试图通过用户输入来关注html元素内部的文本

使用jQuery，这个jsFiddle显示了段落中文本的基本高亮显示。我提到basic是因为它将删除段落内的所有html标记，只考虑段落内的原始文本。

编辑：脚本现在保留了其他标记和样式，但不是完全保留。当试图查找将与另一个标记(例如<span class="matched-text">(te<strong>xt)</span>.</strong>(产生冲突的文本时，将不起作用，因此此实例将被取消。

$('#button').click(function() { // Trigger when button is clicked
  var searchText = $('#search').val(); // Store text of input field
  var foundParagraph = $('p:contains(' + searchText + ')'); // Get the paragraph(s) that contain the search string
  var customStylingClass = '.matched-text';
  $(customStylingClass).each(function() {
    var text = $(this).text(); //get span content
    $(this).replaceWith(text); //replace all span with just content
  });
  foundParagraph.each(function() {
    $(this).html(($(this).html().replace(searchText, '<span class="matched-text">$&</span>'))); // Highlight with strong text
  })
});

.matched-text {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" id="search">
<input type="button" id="button" value="Find">
<div>
  <p>some text here</p>
  <p>Lorem ipsum dolor sit amet (te<b>xt)</b>.</p>
  <p>Styling will <strong>not</strong> be removed <i>anymore</i></p>
  <p>
    Not any <span class="tag">tag</span> at all.
    If there is a conflict with tag closings, the operation will just cancel for the instance.
  </p>
</div>

它可以通过jQuery和JavaScript的组合来实现。

$(document).ready(function() {
    $('#button').click(function() {
	var item = $('#search').val();
        search(item, 'content');
    })
});
function search(searchItem, elementId) {
    // get text content
    var text = $('#' + elementId).text();
    // construct regex based on input
    var regex = new RegExp(searchItem, 'g');
    // generate updated content with highlights
    var newContent = text.replace(regex, "<span style='background-color: yellow'>" + searchItem + "</span>");
    // insert new content
    $('#content').html(newContent);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search">
<input type="button" id="button" value="Find">
<div id='content'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac neque nunc. Vestibulum at augue tristique, rutrum leo vitae, eleifend mauris. Suspendisse commodo leo felis, auctor convallis sapien aliquam at. Curabitur quis ultricies metus. Maecenas id eros non turpis vestibulum sodales a sed sem. Aenean a sem sapien. Sed malesuada orci enim. Ut iaculis, risus eu dictum congue, ligula orci lobortis dolor, sit amet accumsan risus diam id ipsum. Nunc eget elit quis massa tempus suscipit vel at nisl. Duis et malesuada purus. Sed eu lobortis felis. Donec pretium at nibh nec fringilla. Morbi in massa metus. Curabitur ac velit a nulla pellentesque efficitur. Nullam et pharetra velit. Aliquam augue justo, dictum ut consectetur eget, ullamcorper nec urna. tom
Duis ligula mauris, ultricies sed justo eget, consectetur vehicula neque. Aenean scelerisque magna nulla. Nulla porttitor maximus nunc, vitae vestibulum lectus varius vitae. Suspendisse auctor nunc mauris, vel maximus urna hendrerit vitae. Praesent justo nisi, tristique porttitor pulvinar consequat, porttitor nec orci. Vivamus sit amet feugiat ligula. Sed massa urna, suscipit non eros eget, dapibus sodales turpis. Mauris quis pulvinar nunc.
In fringilla quam sed ipsum mattis, at imperdiet lorem bibendum. Phasellus magna quam, pulvinar ac pellentesque sed, ullamcorper quis lectus. Nam aliquam arcu in orci rutrum, et ullamcorper nulla consequat. Nam quis luctus augue. Proin in blandit lacus, vel dapibus lorem. Pellentesque sem est, mollis condimentum auctor vel, luctus mattis mauris. Integer elementum velit in dolor tincidunt, non volutpat sem vulputate. Mauris ac lobortis eros. Nulla neque justo, euismod eu justo in, maximus aliquam nibh. In tempus leo vel interdum accumsan. Duis fermentum turpis eget metus faucibus malesuada. Donec in massa molestie, scelerisque urna id, porta orci. Etiam sit amet dui ut ipsum interdum condimentum. Ut tincidunt dapibus libero ac vulputate. tom
Quisque faucibus metus nec tellus vulputate ultricies. Donec mattis libero sed augue commodo vulputate. Suspendisse blandit lectus non odio tempor, ac scelerisque massa venenatis. Nam consequat odio a aliquam cursus. Vestibulum vel efficitur erat. Sed mattis, dolor at congue rhoncus, justo neque ornare diam, sit amet tincidunt nunc quam sit amet lacus. Mauris eu luctus ipsum.
Etiam et ante tellus. Donec eget quam ullamcorper, finibus sem sed, dictum libero. Donec in ex dignissim risus commodo lobortis. Nunc tincidunt tortor vitae eros congue, vitae tempor ligula rutrum. Phasellus malesuada arcu in tristique finibus. Pellentesque malesuada at nibh et facilisis. Suspendisse convallis consectetur justo. Donec est metus, convallis ut turpis in, mattis egestas mauris. Pellentesque dui velit, lobortis vitae posuere non, ullamcorper vel magna. Integer nec ante quis massa lacinia laoreet eu nec augue. Sed congue massa eget ligula cursus bibendum. Ut dictum purus nec velit feugiat, quis aliquam ligula accumsan. Mauris finibus massa orci, nec facilisis nibh eleifend sit amet.
</div>