Question

我是html / javascript的新手，当用户在文本框中输入值时，我试图将焦点放在html元素内的文本/单词上。

<input type="text" id="search">
<input type="button" id="button" onsubmit="searchKey" value="Find">
<div>
 <p>some text here</p>
</div>

所以如果用户输入＆＃34; text＆＃34;进入输入框，它应匹配文本并专注于它

Answer 1

使用jQuery， this 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>

Answer 2

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

＆＃13;

$(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);
}

＆＃13;

<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>

＆＃13;

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

2 个答案: