react-keywords 0.0.4 → 0.0.5

package/README.md

@@ -9,8 +9,9 @@ react-keywords
 
 Highlight a keyword in a piece of text and return a React element.
 
+<a href="https://uiwjs.github.io/react-keywords">
 <img width="518" alt="Highlight keyword" src="https://user-images.githubusercontent.com/1680273/182382842-c991e9ef-353d-45b0-9e5a-319b56e397d8.png">
-
+</a>
 
 ## Installation
 

package/cjs/index.js

@@ -42,7 +42,7 @@ var KeywordsInner = function KeywordsInner(props) {
   if (typeof children !== 'string') return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
     children: children
   });
-  var splitMatch = new RegExp("".concat(value), caseIgnored ? 'ig' : 'g');
+  var splitMatch = new RegExp((value || '').replace(/\\/g, '\\\\'), caseIgnored ? 'ig' : 'g');
   var values = value ? children.match(splitMatch) : [];
   var matched = children.split(splitMatch);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {

package/cjs/index.js.map

@@ -14,6 +14,7 @@
     "caseIgnored",
     "splitMatch",
     "RegExp",
+    "replace",
     "values",
     "match",
     "matched",
@@ -28,7 +29,7 @@
     "../src/index.tsx"
   ],
   "sourcesContent": [
-    "import { FC, Fragment, PropsWithChildren, useMemo } from 'react';\n\nexport interface KeywordsProps {\n  value?: string;\n  color?: string;\n  caseIgnored?: boolean;\n  backgroundColor?: string;\n  render?: (keyword: string, color: string, backgroundColor: string) => JSX.Element;\n}\n\ninterface HighlightProps extends KeywordsProps {}\nconst Highlight: FC<PropsWithChildren<HighlightProps>> = (props) => {\n  const { children, value, color, backgroundColor, render } = props;\n  const child = useMemo(\n    () => (render ? render(value!, color!, backgroundColor!) : <span style={{ color, backgroundColor }}>{value}</span>),\n    [color, backgroundColor, value],\n  );\n  return (\n    <Fragment>\n      {children}\n      {value && child}\n    </Fragment>\n  );\n};\n\nconst KeywordsInner: FC<PropsWithChildren<KeywordsProps>> = (props) => {\n  const { children, caseIgnored = true, color = 'inherit', backgroundColor = '#ffff00', value, render } = props;\n  if (typeof children !== 'string') return <Fragment>{children}</Fragment>;\n  const splitMatch = new RegExp(`${value}`, caseIgnored ? 'ig' : 'g');\n  const values = value ? children.match(splitMatch) : [];\n  const matched = children.split(splitMatch);\n  return (\n    <Fragment>\n      {matched.map((item, idx) => {\n        return (\n          <Highlight\n            key={idx}\n            color={color}\n            value={matched.length > idx + 1 ? (values as string[])[idx] : undefined}\n            render={render}\n            backgroundColor={backgroundColor}\n          >\n            {item}\n          </Highlight>\n        );\n      })}\n    </Fragment>\n  );\n};\n\nexport default KeywordsInner;\n"
+    "import { FC, Fragment, PropsWithChildren, useMemo } from 'react';\n\nexport interface KeywordsProps {\n  value?: string;\n  color?: string;\n  caseIgnored?: boolean;\n  backgroundColor?: string;\n  render?: (keyword: string, color: string, backgroundColor: string) => JSX.Element;\n}\n\ninterface HighlightProps extends KeywordsProps {}\nconst Highlight: FC<PropsWithChildren<HighlightProps>> = (props) => {\n  const { children, value, color, backgroundColor, render } = props;\n  const child = useMemo(\n    () => (render ? render(value!, color!, backgroundColor!) : <span style={{ color, backgroundColor }}>{value}</span>),\n    [color, backgroundColor, value],\n  );\n  return (\n    <Fragment>\n      {children}\n      {value && child}\n    </Fragment>\n  );\n};\n\nconst KeywordsInner: FC<PropsWithChildren<KeywordsProps>> = (props) => {\n  const { children, caseIgnored = true, color = 'inherit', backgroundColor = '#ffff00', value, render } = props;\n  if (typeof children !== 'string') return <Fragment>{children}</Fragment>;\n  const splitMatch = new RegExp((value || '').replace(/\\\\/g, '\\\\\\\\'), caseIgnored ? 'ig' : 'g');\n  const values = value ? children.match(splitMatch) : [];\n  const matched = children.split(splitMatch);\n  return (\n    <Fragment>\n      {matched.map((item, idx) => {\n        return (\n          <Highlight\n            key={idx}\n            color={color}\n            value={matched.length > idx + 1 ? (values as string[])[idx] : undefined}\n            render={render}\n            backgroundColor={backgroundColor}\n          >\n            {item}\n          </Highlight>\n        );\n      })}\n    </Fragment>\n  );\n};\n\nexport default KeywordsInner;\n"
   ],
-  "mappings": ";;;;;;;AAAA;;;;AAWA,IAAMA,SAAgD,GAAG,SAAnDA,SAAmD,CAACC,KAAD,EAAW;EAClE,IAAQC,QAAR,GAA4DD,KAA5D,CAAQC,QAAR;EAAA,IAAkBC,KAAlB,GAA4DF,KAA5D,CAAkBE,KAAlB;EAAA,IAAyBC,KAAzB,GAA4DH,KAA5D,CAAyBG,KAAzB;EAAA,IAAgCC,eAAhC,GAA4DJ,KAA5D,CAAgCI,eAAhC;EAAA,IAAiDC,MAAjD,GAA4DL,KAA5D,CAAiDK,MAAjD;EACA,IAAMC,KAAK,GAAG,IAAAC,cAAA,EACZ;IAAA,OAAOF,MAAM,GAAGA,MAAM,CAACH,KAAD,EAASC,KAAT,EAAiBC,eAAjB,CAAT,gBAA8C;MAAM,KAAK,EAAE;QAAED,KAAK,EAALA,KAAF;QAASC,eAAe,EAAfA;MAAT,CAAb;MAAA,UAA0CF;IAA1C,EAA3D;EAAA,CADY,EAEZ,CAACC,KAAD,EAAQC,eAAR,EAAyBF,KAAzB,CAFY,CAAd;EAIA,oBACE,sBAAC,eAAD;IAAA,WACGD,QADH,EAEGC,KAAK,IAAII,KAFZ;EAAA,EADF;AAMD,CAZD;;AAcA,IAAME,aAAmD,GAAG,SAAtDA,aAAsD,CAACR,KAAD,EAAW;EACrE,IAAQC,QAAR,GAAwGD,KAAxG,CAAQC,QAAR;EAAA,yBAAwGD,KAAxG,CAAkBS,WAAlB;EAAA,IAAkBA,WAAlB,mCAAgC,IAAhC;EAAA,mBAAwGT,KAAxG,CAAsCG,KAAtC;EAAA,IAAsCA,KAAtC,6BAA8C,SAA9C;EAAA,4BAAwGH,KAAxG,CAAyDI,eAAzD;EAAA,IAAyDA,eAAzD,sCAA2E,SAA3E;EAAA,IAAsFF,KAAtF,GAAwGF,KAAxG,CAAsFE,KAAtF;EAAA,IAA6FG,MAA7F,GAAwGL,KAAxG,CAA6FK,MAA7F;EACA,IAAI,OAAOJ,QAAP,KAAoB,QAAxB,EAAkC,oBAAO,qBAAC,eAAD;IAAA,UAAWA;EAAX,EAAP;EAClC,IAAMS,UAAU,GAAG,IAAIC,MAAJ,WAAcT,KAAd,GAAuBO,WAAW,GAAG,IAAH,GAAU,GAA5C,CAAnB;EACA,IAAMG,MAAM,GAAGV,KAAK,GAAGD,QAAQ,CAACY,KAAT,CAAeH,UAAf,CAAH,GAAgC,EAApD;EACA,IAAMI,OAAO,GAAGb,QAAQ,CAACc,KAAT,CAAeL,UAAf,CAAhB;EACA,oBACE,qBAAC,eAAD;IAAA,UACGI,OAAO,CAACE,GAAR,CAAY,UAACC,IAAD,EAAOC,GAAP,EAAe;MAC1B,oBACE,qBAAC,SAAD;QAEE,KAAK,EAAEf,KAFT;QAGE,KAAK,EAAEW,OAAO,CAACK,MAAR,GAAiBD,GAAG,GAAG,CAAvB,GAA4BN,MAAD,CAAqBM,GAArB,CAA3B,GAAuDE,SAHhE;QAIE,MAAM,EAAEf,MAJV;QAKE,eAAe,EAAED,eALnB;QAAA,UAOGa;MAPH,GACOC,GADP,CADF;IAWD,CAZA;EADH,EADF;AAiBD,CAvBD;;eAyBeV,a"
+  "mappings": ";;;;;;;AAAA;;;;AAWA,IAAMA,SAAgD,GAAG,SAAnDA,SAAmD,CAACC,KAAD,EAAW;EAClE,IAAQC,QAAR,GAA4DD,KAA5D,CAAQC,QAAR;EAAA,IAAkBC,KAAlB,GAA4DF,KAA5D,CAAkBE,KAAlB;EAAA,IAAyBC,KAAzB,GAA4DH,KAA5D,CAAyBG,KAAzB;EAAA,IAAgCC,eAAhC,GAA4DJ,KAA5D,CAAgCI,eAAhC;EAAA,IAAiDC,MAAjD,GAA4DL,KAA5D,CAAiDK,MAAjD;EACA,IAAMC,KAAK,GAAG,IAAAC,cAAA,EACZ;IAAA,OAAOF,MAAM,GAAGA,MAAM,CAACH,KAAD,EAASC,KAAT,EAAiBC,eAAjB,CAAT,gBAA8C;MAAM,KAAK,EAAE;QAAED,KAAK,EAALA,KAAF;QAASC,eAAe,EAAfA;MAAT,CAAb;MAAA,UAA0CF;IAA1C,EAA3D;EAAA,CADY,EAEZ,CAACC,KAAD,EAAQC,eAAR,EAAyBF,KAAzB,CAFY,CAAd;EAIA,oBACE,sBAAC,eAAD;IAAA,WACGD,QADH,EAEGC,KAAK,IAAII,KAFZ;EAAA,EADF;AAMD,CAZD;;AAcA,IAAME,aAAmD,GAAG,SAAtDA,aAAsD,CAACR,KAAD,EAAW;EACrE,IAAQC,QAAR,GAAwGD,KAAxG,CAAQC,QAAR;EAAA,yBAAwGD,KAAxG,CAAkBS,WAAlB;EAAA,IAAkBA,WAAlB,mCAAgC,IAAhC;EAAA,mBAAwGT,KAAxG,CAAsCG,KAAtC;EAAA,IAAsCA,KAAtC,6BAA8C,SAA9C;EAAA,4BAAwGH,KAAxG,CAAyDI,eAAzD;EAAA,IAAyDA,eAAzD,sCAA2E,SAA3E;EAAA,IAAsFF,KAAtF,GAAwGF,KAAxG,CAAsFE,KAAtF;EAAA,IAA6FG,MAA7F,GAAwGL,KAAxG,CAA6FK,MAA7F;EACA,IAAI,OAAOJ,QAAP,KAAoB,QAAxB,EAAkC,oBAAO,qBAAC,eAAD;IAAA,UAAWA;EAAX,EAAP;EAClC,IAAMS,UAAU,GAAG,IAAIC,MAAJ,CAAW,CAACT,KAAK,IAAI,EAAV,EAAcU,OAAd,CAAsB,KAAtB,EAA6B,MAA7B,CAAX,EAAiDH,WAAW,GAAG,IAAH,GAAU,GAAtE,CAAnB;EACA,IAAMI,MAAM,GAAGX,KAAK,GAAGD,QAAQ,CAACa,KAAT,CAAeJ,UAAf,CAAH,GAAgC,EAApD;EACA,IAAMK,OAAO,GAAGd,QAAQ,CAACe,KAAT,CAAeN,UAAf,CAAhB;EACA,oBACE,qBAAC,eAAD;IAAA,UACGK,OAAO,CAACE,GAAR,CAAY,UAACC,IAAD,EAAOC,GAAP,EAAe;MAC1B,oBACE,qBAAC,SAAD;QAEE,KAAK,EAAEhB,KAFT;QAGE,KAAK,EAAEY,OAAO,CAACK,MAAR,GAAiBD,GAAG,GAAG,CAAvB,GAA4BN,MAAD,CAAqBM,GAArB,CAA3B,GAAuDE,SAHhE;QAIE,MAAM,EAAEhB,MAJV;QAKE,eAAe,EAAED,eALnB;QAAA,UAOGc;MAPH,GACOC,GADP,CADF;IAWD,CAZA;EADH,EADF;AAiBD,CAvBD;;eAyBeX,a"
 }

package/dist/keywords.js

@@ -128,7 +128,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(787);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(605);
-var Highlight=function Highlight(props){var children=props.children,value=props.value,color=props.color,backgroundColor=props.backgroundColor,render=props.render;var child=(0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function(){return render?render(value,color,backgroundColor):/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("span",{style:{color:color,backgroundColor:backgroundColor},children:value});},[color,backgroundColor,value]);return/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{children:[children,value&&child]});};var KeywordsInner=function KeywordsInner(props){var children=props.children,_props$caseIgnored=props.caseIgnored,caseIgnored=_props$caseIgnored===void 0?true:_props$caseIgnored,_props$color=props.color,color=_props$color===void 0?'inherit':_props$color,_props$backgroundColo=props.backgroundColor,backgroundColor=_props$backgroundColo===void 0?'#ffff00':_props$backgroundColo,value=props.value,render=props.render;if(typeof children!=='string')return/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{children:children});var splitMatch=new RegExp("".concat(value),caseIgnored?'ig':'g');var values=value?children.match(splitMatch):[];var matched=children.split(splitMatch);return/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{children:matched.map(function(item,idx){return/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(Highlight,{color:color,value:matched.length>idx+1?values[idx]:undefined,render:render,backgroundColor:backgroundColor,children:item},idx);})});};/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (KeywordsInner);
+var Highlight=function Highlight(props){var children=props.children,value=props.value,color=props.color,backgroundColor=props.backgroundColor,render=props.render;var child=(0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function(){return render?render(value,color,backgroundColor):/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("span",{style:{color:color,backgroundColor:backgroundColor},children:value});},[color,backgroundColor,value]);return/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{children:[children,value&&child]});};var KeywordsInner=function KeywordsInner(props){var children=props.children,_props$caseIgnored=props.caseIgnored,caseIgnored=_props$caseIgnored===void 0?true:_props$caseIgnored,_props$color=props.color,color=_props$color===void 0?'inherit':_props$color,_props$backgroundColo=props.backgroundColor,backgroundColor=_props$backgroundColo===void 0?'#ffff00':_props$backgroundColo,value=props.value,render=props.render;if(typeof children!=='string')return/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{children:children});var splitMatch=new RegExp((value||'').replace(/\\/g,'\\\\'),caseIgnored?'ig':'g');var values=value?children.match(splitMatch):[];var matched=children.split(splitMatch);return/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{children:matched.map(function(item,idx){return/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(Highlight,{color:color,value:matched.length>idx+1?values[idx]:undefined,render:render,backgroundColor:backgroundColor,children:item},idx);})});};/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (KeywordsInner);
 })();
 
 /******/ 	return __webpack_exports__;

package/dist/keywords.min.js

@@ -1,2 +1,2 @@
 /*! For license information please see keywords.min.js.LICENSE.txt */
-!function(e,r){"object"===typeof exports&&"object"===typeof module?module.exports=r(require("react")):"function"===typeof define&&define.amd?define(["react"],r):"object"===typeof exports?exports["react-keywords"]=r(require("react")):e["react-keywords"]=r(e.React)}(self,(e=>(()=>{"use strict";var r={298:(e,r,o)=>{var t=o(787),n=Symbol.for("react.element"),a=Symbol.for("react.fragment"),c=Object.prototype.hasOwnProperty,l=t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,d={key:!0,ref:!0,__self:!0,__source:!0};function i(e,r,o){var t,a={},i=null,u=null;for(t in void 0!==o&&(i=""+o),void 0!==r.key&&(i=""+r.key),void 0!==r.ref&&(u=r.ref),r)c.call(r,t)&&!d.hasOwnProperty(t)&&(a[t]=r[t]);if(e&&e.defaultProps)for(t in r=e.defaultProps)void 0===a[t]&&(a[t]=r[t]);return{$$typeof:n,type:e,key:i,ref:u,props:a,_owner:l.current}}r.jsx=i,r.jsxs=i},605:(e,r,o)=>{e.exports=o(298)},787:r=>{r.exports=e}},o={};function t(e){var n=o[e];if(void 0!==n)return n.exports;var a=o[e]={exports:{}};return r[e](a,a.exports,t),a.exports}t.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return t.d(r,{a:r}),r},t.d=(e,r)=>{for(var o in r)t.o(r,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:r[o]})},t.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),t.r=e=>{"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{t.r(n),t.d(n,{default:()=>a});var e=t(787),r=t(605),o=function(o){var t=o.children,n=o.value,a=o.color,c=o.backgroundColor,l=o.render,d=(0,e.useMemo)((function(){return l?l(n,a,c):(0,r.jsx)("span",{style:{color:a,backgroundColor:c},children:n})}),[a,c,n]);return(0,r.jsxs)(e.Fragment,{children:[t,n&&d]})};const a=function(t){var n=t.children,a=t.caseIgnored,c=void 0===a||a,l=t.color,d=void 0===l?"inherit":l,i=t.backgroundColor,u=void 0===i?"#ffff00":i,f=t.value,s=t.render;if("string"!==typeof n)return(0,r.jsx)(e.Fragment,{children:n});var p=new RegExp("".concat(f),c?"ig":"g"),y=f?n.match(p):[],v=n.split(p);return(0,r.jsx)(e.Fragment,{children:v.map((function(e,t){return(0,r.jsx)(o,{color:d,value:v.length>t+1?y[t]:void 0,render:s,backgroundColor:u,children:e},t)}))})}})(),n})()));
+!function(e,r){"object"===typeof exports&&"object"===typeof module?module.exports=r(require("react")):"function"===typeof define&&define.amd?define(["react"],r):"object"===typeof exports?exports["react-keywords"]=r(require("react")):e["react-keywords"]=r(e.React)}(self,(e=>(()=>{"use strict";var r={298:(e,r,o)=>{var t=o(787),n=Symbol.for("react.element"),a=Symbol.for("react.fragment"),l=Object.prototype.hasOwnProperty,c=t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,d={key:!0,ref:!0,__self:!0,__source:!0};function i(e,r,o){var t,a={},i=null,u=null;for(t in void 0!==o&&(i=""+o),void 0!==r.key&&(i=""+r.key),void 0!==r.ref&&(u=r.ref),r)l.call(r,t)&&!d.hasOwnProperty(t)&&(a[t]=r[t]);if(e&&e.defaultProps)for(t in r=e.defaultProps)void 0===a[t]&&(a[t]=r[t]);return{$$typeof:n,type:e,key:i,ref:u,props:a,_owner:c.current}}r.jsx=i,r.jsxs=i},605:(e,r,o)=>{e.exports=o(298)},787:r=>{r.exports=e}},o={};function t(e){var n=o[e];if(void 0!==n)return n.exports;var a=o[e]={exports:{}};return r[e](a,a.exports,t),a.exports}t.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return t.d(r,{a:r}),r},t.d=(e,r)=>{for(var o in r)t.o(r,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:r[o]})},t.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),t.r=e=>{"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{t.r(n),t.d(n,{default:()=>a});var e=t(787),r=t(605),o=function(o){var t=o.children,n=o.value,a=o.color,l=o.backgroundColor,c=o.render,d=(0,e.useMemo)((function(){return c?c(n,a,l):(0,r.jsx)("span",{style:{color:a,backgroundColor:l},children:n})}),[a,l,n]);return(0,r.jsxs)(e.Fragment,{children:[t,n&&d]})};const a=function(t){var n=t.children,a=t.caseIgnored,l=void 0===a||a,c=t.color,d=void 0===c?"inherit":c,i=t.backgroundColor,u=void 0===i?"#ffff00":i,f=t.value,s=t.render;if("string"!==typeof n)return(0,r.jsx)(e.Fragment,{children:n});var p=new RegExp((f||"").replace(/\\/g,"\\\\"),l?"ig":"g"),y=f?n.match(p):[],v=n.split(p);return(0,r.jsx)(e.Fragment,{children:v.map((function(e,t){return(0,r.jsx)(o,{color:d,value:v.length>t+1?y[t]:void 0,render:s,backgroundColor:u,children:e},t)}))})}})(),n})()));

package/esm/index.js

@@ -34,7 +34,7 @@ var KeywordsInner = props => {
   if (typeof children !== 'string') return /*#__PURE__*/_jsx(Fragment, {
     children: children
   });
-  var splitMatch = new RegExp("" + value, caseIgnored ? 'ig' : 'g');
+  var splitMatch = new RegExp((value || '').replace(/\\/g, '\\\\'), caseIgnored ? 'ig' : 'g');
   var values = value ? children.match(splitMatch) : [];
   var matched = children.split(splitMatch);
   return /*#__PURE__*/_jsx(Fragment, {

package/esm/index.js.map

@@ -15,6 +15,7 @@
     "caseIgnored",
     "splitMatch",
     "RegExp",
+    "replace",
     "values",
     "match",
     "matched",
@@ -29,7 +30,7 @@
     "../src/index.tsx"
   ],
   "sourcesContent": [
-    "import { FC, Fragment, PropsWithChildren, useMemo } from 'react';\n\nexport interface KeywordsProps {\n  value?: string;\n  color?: string;\n  caseIgnored?: boolean;\n  backgroundColor?: string;\n  render?: (keyword: string, color: string, backgroundColor: string) => JSX.Element;\n}\n\ninterface HighlightProps extends KeywordsProps {}\nconst Highlight: FC<PropsWithChildren<HighlightProps>> = (props) => {\n  const { children, value, color, backgroundColor, render } = props;\n  const child = useMemo(\n    () => (render ? render(value!, color!, backgroundColor!) : <span style={{ color, backgroundColor }}>{value}</span>),\n    [color, backgroundColor, value],\n  );\n  return (\n    <Fragment>\n      {children}\n      {value && child}\n    </Fragment>\n  );\n};\n\nconst KeywordsInner: FC<PropsWithChildren<KeywordsProps>> = (props) => {\n  const { children, caseIgnored = true, color = 'inherit', backgroundColor = '#ffff00', value, render } = props;\n  if (typeof children !== 'string') return <Fragment>{children}</Fragment>;\n  const splitMatch = new RegExp(`${value}`, caseIgnored ? 'ig' : 'g');\n  const values = value ? children.match(splitMatch) : [];\n  const matched = children.split(splitMatch);\n  return (\n    <Fragment>\n      {matched.map((item, idx) => {\n        return (\n          <Highlight\n            key={idx}\n            color={color}\n            value={matched.length > idx + 1 ? (values as string[])[idx] : undefined}\n            render={render}\n            backgroundColor={backgroundColor}\n          >\n            {item}\n          </Highlight>\n        );\n      })}\n    </Fragment>\n  );\n};\n\nexport default KeywordsInner;\n"
+    "import { FC, Fragment, PropsWithChildren, useMemo } from 'react';\n\nexport interface KeywordsProps {\n  value?: string;\n  color?: string;\n  caseIgnored?: boolean;\n  backgroundColor?: string;\n  render?: (keyword: string, color: string, backgroundColor: string) => JSX.Element;\n}\n\ninterface HighlightProps extends KeywordsProps {}\nconst Highlight: FC<PropsWithChildren<HighlightProps>> = (props) => {\n  const { children, value, color, backgroundColor, render } = props;\n  const child = useMemo(\n    () => (render ? render(value!, color!, backgroundColor!) : <span style={{ color, backgroundColor }}>{value}</span>),\n    [color, backgroundColor, value],\n  );\n  return (\n    <Fragment>\n      {children}\n      {value && child}\n    </Fragment>\n  );\n};\n\nconst KeywordsInner: FC<PropsWithChildren<KeywordsProps>> = (props) => {\n  const { children, caseIgnored = true, color = 'inherit', backgroundColor = '#ffff00', value, render } = props;\n  if (typeof children !== 'string') return <Fragment>{children}</Fragment>;\n  const splitMatch = new RegExp((value || '').replace(/\\\\/g, '\\\\\\\\'), caseIgnored ? 'ig' : 'g');\n  const values = value ? children.match(splitMatch) : [];\n  const matched = children.split(splitMatch);\n  return (\n    <Fragment>\n      {matched.map((item, idx) => {\n        return (\n          <Highlight\n            key={idx}\n            color={color}\n            value={matched.length > idx + 1 ? (values as string[])[idx] : undefined}\n            render={render}\n            backgroundColor={backgroundColor}\n          >\n            {item}\n          </Highlight>\n        );\n      })}\n    </Fragment>\n  );\n};\n\nexport default KeywordsInner;\n"
   ],
-  "mappings": "AAAA,SAAaA,QAAb,EAA0CC,OAA1C,QAAyD,OAAzD;;;;AAWA,IAAMC,SAAgD,GAAIC,KAAD,IAAW;EAClE,IAAM;IAAEC,QAAF;IAAYC,KAAZ;IAAmBC,KAAnB;IAA0BC,eAA1B;IAA2CC;EAA3C,IAAsDL,KAA5D;EACA,IAAMM,KAAK,GAAGR,OAAO,CACnB,MAAOO,MAAM,GAAGA,MAAM,CAACH,KAAD,EAASC,KAAT,EAAiBC,eAAjB,CAAT,gBAA8C;IAAM,KAAK,EAAE;MAAED,KAAF;MAASC;IAAT,CAAb;IAAA,UAA0CF;EAA1C,EADxC,EAEnB,CAACC,KAAD,EAAQC,eAAR,EAAyBF,KAAzB,CAFmB,CAArB;EAIA,oBACE,MAAC,QAAD;IAAA,WACGD,QADH,EAEGC,KAAK,IAAII,KAFZ;EAAA,EADF;AAMD,CAZD;;AAcA,IAAMC,aAAmD,GAAIP,KAAD,IAAW;EACrE,IAAM;IAAEC,QAAF;IAAYO,WAAW,GAAG,IAA1B;IAAgCL,KAAK,GAAG,SAAxC;IAAmDC,eAAe,GAAG,SAArE;IAAgFF,KAAhF;IAAuFG;EAAvF,IAAkGL,KAAxG;EACA,IAAI,OAAOC,QAAP,KAAoB,QAAxB,EAAkC,oBAAO,KAAC,QAAD;IAAA,UAAWA;EAAX,EAAP;EAClC,IAAMQ,UAAU,GAAG,IAAIC,MAAJ,MAAcR,KAAd,EAAuBM,WAAW,GAAG,IAAH,GAAU,GAA5C,CAAnB;EACA,IAAMG,MAAM,GAAGT,KAAK,GAAGD,QAAQ,CAACW,KAAT,CAAeH,UAAf,CAAH,GAAgC,EAApD;EACA,IAAMI,OAAO,GAAGZ,QAAQ,CAACa,KAAT,CAAeL,UAAf,CAAhB;EACA,oBACE,KAAC,QAAD;IAAA,UACGI,OAAO,CAACE,GAAR,CAAY,CAACC,IAAD,EAAOC,GAAP,KAAe;MAC1B,oBACE,KAAC,SAAD;QAEE,KAAK,EAAEd,KAFT;QAGE,KAAK,EAAEU,OAAO,CAACK,MAAR,GAAiBD,GAAG,GAAG,CAAvB,GAA4BN,MAAD,CAAqBM,GAArB,CAA3B,GAAuDE,SAHhE;QAIE,MAAM,EAAEd,MAJV;QAKE,eAAe,EAAED,eALnB;QAAA,UAOGY;MAPH,GACOC,GADP,CADF;IAWD,CAZA;EADH,EADF;AAiBD,CAvBD;;AAyBA,eAAeV,aAAf"
+  "mappings": "AAAA,SAAaA,QAAb,EAA0CC,OAA1C,QAAyD,OAAzD;;;;AAWA,IAAMC,SAAgD,GAAIC,KAAD,IAAW;EAClE,IAAM;IAAEC,QAAF;IAAYC,KAAZ;IAAmBC,KAAnB;IAA0BC,eAA1B;IAA2CC;EAA3C,IAAsDL,KAA5D;EACA,IAAMM,KAAK,GAAGR,OAAO,CACnB,MAAOO,MAAM,GAAGA,MAAM,CAACH,KAAD,EAASC,KAAT,EAAiBC,eAAjB,CAAT,gBAA8C;IAAM,KAAK,EAAE;MAAED,KAAF;MAASC;IAAT,CAAb;IAAA,UAA0CF;EAA1C,EADxC,EAEnB,CAACC,KAAD,EAAQC,eAAR,EAAyBF,KAAzB,CAFmB,CAArB;EAIA,oBACE,MAAC,QAAD;IAAA,WACGD,QADH,EAEGC,KAAK,IAAII,KAFZ;EAAA,EADF;AAMD,CAZD;;AAcA,IAAMC,aAAmD,GAAIP,KAAD,IAAW;EACrE,IAAM;IAAEC,QAAF;IAAYO,WAAW,GAAG,IAA1B;IAAgCL,KAAK,GAAG,SAAxC;IAAmDC,eAAe,GAAG,SAArE;IAAgFF,KAAhF;IAAuFG;EAAvF,IAAkGL,KAAxG;EACA,IAAI,OAAOC,QAAP,KAAoB,QAAxB,EAAkC,oBAAO,KAAC,QAAD;IAAA,UAAWA;EAAX,EAAP;EAClC,IAAMQ,UAAU,GAAG,IAAIC,MAAJ,CAAW,CAACR,KAAK,IAAI,EAAV,EAAcS,OAAd,CAAsB,KAAtB,EAA6B,MAA7B,CAAX,EAAiDH,WAAW,GAAG,IAAH,GAAU,GAAtE,CAAnB;EACA,IAAMI,MAAM,GAAGV,KAAK,GAAGD,QAAQ,CAACY,KAAT,CAAeJ,UAAf,CAAH,GAAgC,EAApD;EACA,IAAMK,OAAO,GAAGb,QAAQ,CAACc,KAAT,CAAeN,UAAf,CAAhB;EACA,oBACE,KAAC,QAAD;IAAA,UACGK,OAAO,CAACE,GAAR,CAAY,CAACC,IAAD,EAAOC,GAAP,KAAe;MAC1B,oBACE,KAAC,SAAD;QAEE,KAAK,EAAEf,KAFT;QAGE,KAAK,EAAEW,OAAO,CAACK,MAAR,GAAiBD,GAAG,GAAG,CAAvB,GAA4BN,MAAD,CAAqBM,GAArB,CAA3B,GAAuDE,SAHhE;QAIE,MAAM,EAAEf,MAJV;QAKE,eAAe,EAAED,eALnB;QAAA,UAOGa;MAPH,GACOC,GADP,CADF;IAWD,CAZA;EADH,EADF;AAiBD,CAvBD;;AAyBA,eAAeX,aAAf"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-keywords",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Highlight a keyword in a piece of text and return a React element.",
   "homepage": "https://uiwjs.github.io/react-keywords/",
   "author": "kenny wang <wowohoo@qq.com>",

package/src/index.tsx

@@ -26,7 +26,7 @@ const Highlight: FC<PropsWithChildren<HighlightProps>> = (props) => {
 const KeywordsInner: FC<PropsWithChildren<KeywordsProps>> = (props) => {
   const { children, caseIgnored = true, color = 'inherit', backgroundColor = '#ffff00', value, render } = props;
   if (typeof children !== 'string') return <Fragment>{children}</Fragment>;
-  const splitMatch = new RegExp(`${value}`, caseIgnored ? 'ig' : 'g');
+  const splitMatch = new RegExp((value || '').replace(/\\/g, '\\\\'), caseIgnored ? 'ig' : 'g');
   const values = value ? children.match(splitMatch) : [];
   const matched = children.split(splitMatch);
   return (