Search and Highlight in Jquery

Search and Highlight in jQuery

http://jsfiddle.net/UPs3V/291/

 var src_str = $("#test").text();
var term = "my text";
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");

$("#test").html(src_str);

try this one it may help you

Search and highlight text on page while keeping html structure

Here is a possible base using only native javascript. This behave somewhat like CTRL+F.

This seems to preserve the <td> elements.

The clear function replace the mark elements by a wbr element:

On UTF-8 encoded pages, <wbr> behaves like the U+200B ZERO-WIDTH SPACE
code point.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr

function mark(it){  clearIt()  if (it.length > 2){    let c = new RegExp(it, "ig")     main.innerHTML = main.innerHTML.replace(c,"<mark>"+it+"</mark>")  }  }
function clearIt(){  let b = new RegExp("mark>", "ig")   main.innerHTML = main.innerHTML.replace(b,"wbr>")}
mark(search.value)

input[type="text"] {     width: 50%;    margin:10px;    padding: 5px;    float:left;    clear:left;}div{  float:left;  clear:left;  margin:10px 10px;}.bold {  font-weight: 700;}table td {  border: solid 1px #ccc;  padding: 3px;}

<input onfocusout="clearIt()" oninput="mark(this.value)"  value="Lorem" id="search" placeholder="Lorem"><button onclick="mark(search.value)">SEARCH</button><button onclick="clearIt()">CLEAR</button>
<div id="main"><div class="objType" id="item1">  <span class="bold">Accepted</span> Event Relation  <table>  <tr>    <td>Lorem</td>    <td>ipsum</td>  </tr>  </table></div><div class="objType" id="item2">  Case <span class="bold">Status</span> Value  <table>  <tr>    <td>Lorem</td>    <td>ipsum</td>  </tr>  </table></div><div class="objType" id="item3">  External <span class="bold">Data Source</span>  <table>  <tr>    <td>Lorem</td>    <td>ipsum</td>  </tr>  </table></div><div class="objType" id="item4">  Navigation <span class="bold">Link</span> Set  <table>  <tr>    <td>Lorem</td>    <td>ipsum</td>  </tr>  </table></div>
</div>

jquery highlight search text in table

Use toLowerCase() anc change like below:-

if ($el.text().toLowerCase().search(searchText.toLowerCase()) != -1 && !matched) {
    //console.log("matched", $el, $el.html());
    wrapContent(searchText.length, $el, $el.html());
    console.log($el.text().toLowerCase());
    if (searchText.toLowerCase() == $el.text().toLowerCase()) {
        // found the entry
        //console.log("matched");
        matched = true;
    }
}

Workinf fiddle:- https://jsfiddle.net/c612ak5d/

How to search page for words and highlight them (JQuery)

It need to be done that way:

$(this).parent().html($(this).parent().html().replace($(this).text(),$(this).text().replace(regex, " <span style = 'background-color: " + searchList[i].color + " ;'>" + searchList[i].word + "</span> ")));

This is because when you change the innerHTML directly you will mess the dom structure and lose the html format, when you change the text solely you would have a a sanitized DOM inside quotes, so it should be solved one way by modifying the text part inside the inner html.

see it here

Highlight search string using jQuery

The problem you have must have something to do with the environment you're using the code and not the code itself. As you can see in the snippet below, the function works as expected, wrapping the matched word once.

Snippet:

/* ----- JavaScript ----- */var div = $("div");
function highlight () {  div.highlight("expected");  console.log(div.html());}
function dehighlight () {  div.removeHighlight();  console.log(div.html());}

<!----- HTML -----><script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="//pastebin.com/raw/6zePUJr1"></script><style>span.highlight {background-color: #FFFF77}</style>
<button onclick="highlight()">Highlight</button><button onclick="dehighlight()">Dehighlight</button><div>The code works as expected.</div>

Search text and highlight using JQuery

Hi You can find a text in a div using below function.

jQuery.fn.highlight = function (pat) {
    function innerHighlight(node, pat) {
        var skip = 0;
        if (node.nodeType == 3) {
            var pos = node.data.toUpperCase().indexOf(pat);
            if (pos >= 0) {
                var spannode = document.createElement('span');
                spannode.className = 'highlight';
                var middlebit = node.splitText(pos);
                var endbit = middlebit.splitText(pat.length);
                var middleclone = middlebit.cloneNode(true);
                spannode.appendChild(middleclone);
                middlebit.parentNode.replaceChild(spannode, middlebit);
                skip = 1;
            }
        } else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
            for (var i = 0; i < node.childNodes.length; ++i) {
                i += innerHighlight(node.childNodes[i], pat);
            }
        }
        return skip;
    }
    return this.length && pat && pat.length ? this.each(function () {
        innerHighlight(this, pat.toUpperCase());
    }) : this;
};
jQuery.fn.removeHighlight = function () {
    return this.find("span.highlight").each(function () {
        this.parentNode.firstChild.nodeName;
        with(this.parentNode) {
            replaceChild(this.firstChild, this);
            normalize();
        }
    }).end();
};

var $finder = $('#formtext-finder'),
    $field = $finder.children().first(),
    $clear = $field.next(),
    $area = $(document.body),
    $viewport = $('html, body');

$field.on("keyup", function () {
    $area.removeHighlight().highlight(this.value); 
    $viewport.scrollTop($area.find('span.highlight').first().offset().top - 50);
});
$clear.on("click", function () {
    $area.removeHighlight(); 
    $field.val('').trigger("focus"); 
    $viewport.scrollTop(0); 
    return false;
});

here is a working example.

jQuery highlight words on search

You can just store this.value.toLowerCase() in data, then remove the loop and have:

$('.ruleDetailsPlaceholder').unhighlight();
$('.ruleDetailsPlaceholder').highlight(data);

Here's the jsfiddle. Is this what you were looking for?

---

Related Topics