react-hi-text
Version:
React text highlight component
1 lines • 2.12 kB
JavaScript
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.ReactHiText=t():e.ReactHiText=t()}(this,function(){return function(e){function t(s){if(i[s])return i[s].exports;var n=i[s]={exports:{},id:s,loaded:!1};return e[s].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t,i){e.exports=i(1)},function(e,t){"use strict";var i=React.createClass({displayName:"HiText",getDefaultProps:function(){return{className:"highlight","case-sensitive":!1,hi:""}},componentDidMount:function(){this.el=this.getDOMNode(),this._html=this.el.innerHTML,this.setHighlight(this.props.hi,this.props["case-sensitive"])},setHighlight:function(e,t){if(e=e.trim()){var i=this.props.className,s=this,n=function o(n){for(var r=function l(n){if(3===n.nodeType){var r=t?n.data.indexOf(e):n.data.toLowerCase().indexOf(e.toLowerCase());if(0>r)return;var a;0===r?a=n.splitText(e.length):r>0&&(a=n.splitText(r).splitText(e.length));var c=a.previousSibling,h=document.createElement("span");h.className=i,h.textContent=c.data,a.parentNode.replaceChild(h,c),s.hasMatched=!0,l(a)}else 1!==n.nodeType||!n.childNodes||"SPAN"===n.tagName&&n.classList.contains(i)||/^(style|script)$/i.test(n.tagName)||o(n)},a=0;a<n.childNodes.length;++a)r(n.childNodes[a])};return n(this.el),this}},_flatten:function(e){for(var t=this,i=0,s=e.childNodes,n=s.length;n>i;i++){var o=s[i];if(1===o.nodeType)t._flatten(o);else if(3===o.nodeType){var r=o.nextSibling;if(r&&3===r.nodeType){var a=o.data+r.data,l=e.ownerDocument.createTextNode(a);e.insertBefore(l,o),e.removeChild(o),e.removeChild(r),i--,n--}}}},clean:function(){var e=this.el.querySelectorAll("."+this.props.className);return Array.prototype.forEach.call(e,function(e){e.parentNode.replaceChild(e.firstChild,e)}),this._flatten(this.el),this.hasMatched=!1,this},componentDidUpdate:function(e){this.setHighlight(this.props.hi,this.props["case-sensitive"])},render:function(){return React.createElement("span",null,this.props.children)}});e.exports=i}])});