binder: added a closing anchor

More accurate identification of the end of the key in difficult cases

Author: rejchev

README.md

@@ -8,32 +8,32 @@ The StringBinder allows you to replace keywords in plain text with ReactNode ele
 
 ## Usage
 ### Keywords
-A keyword in plain text must start with `$` and contain only `A-Za-z` with out any spaces.
+A keyword in plain text must start & close with `$` and contain only `A-Za-z` with out any spaces (min len = 1).
 
 ```jsx
 
-// keyword is $keyword
-const success = `This is a $keyword.`;
+// keyword is $keyword$
+const success = `This is a $keyword$.`;
 
 // just not handled
 const fail = `This is not a $1keyword`;
 
-// keyword is $key
+// just not handled
 const watch = `This is not a $key_word`;
 
 // multiply keys: $flowers, $crons
-const multiple = "$flowers and $crowns.";
+const multiple = "$flowers$ and $crowns$.";
 ```
 ### Binds
-Bind object keys must be same as keywords but with out `$`
+Keys of bindable `ReactNode` | `string` must be same as keywords but without `$`
 
 ```jsx
 import StringBinderInstance from "@rejchev/react-string-binder";
 
-const text = "This is a simple $example";
+const text = "This is a simple $nl$";
 
 StringBinderInstance.bind(text, {
-    example: <hr />
+    nl: <hr />
 })
 
 ```
@@ -44,13 +44,57 @@ StringBinderInstance.bind(text, {
 
 import StringBinderInstance from "@rejchev/react-string-binder";
 
-const text = 
-  "The spring sun warms the awakening nature. " +
-  "Birds chirp joyfully in the tree $crowns, $flowers stretch towards the heavenly surface. " +
-  "The air is filled with freshness and the aroma of the first flowers."
-
-const element = StringBinderInstance.bind(text, {
-  crowns: <a href={'https://en.wikipedia.org/wiki/Crown_(botany)'} target={'_blank'}>crowns</a>,
-  flowers: <a href={'https://en.wikipedia.org/wiki/Flower'} target={'_blank'}>flowers</a>
-})
+function App() {
+
+  const text =
+    "The spring sun warms the awakening nature. $n$" +
+    "Birds chirp joyfully in the tree $crowns$, $flowers$ stretch towards the heavenly surface. $n$" +
+    "The air is filled with freshness and the aroma of the first flowers."
+
+  const unknownKeys =
+    // Test variant <br/>
+    "Test $variant$ $n$" +
+
+    // Test another_variant <br/>
+    "Test another_$variant$ $n$" +
+
+    // Test third_variant_variant
+    "Test third_$variant$_variant"
+
+  const oneMore =
+    // Test <a href="//yandex.ru" target="_blank">flowers</a>flowers <br/>
+    "Test $flowers$flowers $n$" +
+
+    // Test <a href="//yandex.ru" target="_blank">flowers</a>flowers <br/>
+    "Test $flowers$flowers$ $n$" +
+
+    // Test <a href="//yandex.ru" target="_blank">flowers</a><a href="//yandex.ru" target="_blank">flowers</a> <br/>
+    "Test $flowers$$flowers$ $n$"
+
+  return (
+    <>
+      <p className="read-the-docs">
+        {StringBinderInstance.bind(text, {
+          crowns: <a href={'//google.com'} target={'_blank'}>crowns</a>,
+          flowers: <a href={'//yandex.ru'} target={'_blank'}>flowers</a>,
+          n: <br/>,
+        })}
+      </p>
+      <p className="read-the-docs">
+        {StringBinderInstance.bind(unknownKeys, {
+          crowns: <a href={'//google.com'} target={'_blank'}>crowns</a>,
+          flowers: <a href={'//yandex.ru'} target={'_blank'}>flowers</a>,
+          n: <br/>,
+        })}
+      </p>
+      <p className="read-the-docs">
+        {StringBinderInstance.bind(oneMore, {
+          crowns: <a href={'//google.com'} target={'_blank'}>crowns</a>,
+          flowers: <a href={'//yandex.ru'} target={'_blank'}>flowers</a>,
+          n: <br/>,
+        })}
+      </p>
+    </>
+  )
+}
 ```

example/App.tsx

@@ -4,16 +4,51 @@ import StringBinderInstance from "../lib";
 function App() {
 
   const text =
-    "The spring sun warms the awakening nature. " +
-    "Birds chirp joyfully in the tree $crowns, $flowers stretch towards the heavenly surface. " +
+    "The spring sun warms the awakening nature. $n$" +
+    "Birds chirp joyfully in the tree $crowns$, $flowers$ stretch towards the heavenly surface. $n$" +
     "The air is filled with freshness and the aroma of the first flowers."
 
+  const unknownKeys =
+    // Test variant <br/>
+    "Test $variant$ $n$" +
+
+    // Test another_variant <br/>
+    "Test another_$variant$ $n$" +
+
+    // Test third_variant_variant
+    "Test third_$variant$_variant"
+
+  const oneMore =
+    // Test <a href="//yandex.ru" target="_blank">flowers</a>flowers <br/>
+    "Test $flowers$flowers $n$" +
+
+    // Test <a href="//yandex.ru" target="_blank">flowers</a>flowers <br/>
+    "Test $flowers$flowers$ $n$" +
+
+    // Test <a href="//yandex.ru" target="_blank">flowers</a><a href="//yandex.ru" target="_blank">flowers</a> <br/>
+    "Test $flowers$$flowers$ $n$"
+
   return (
     <>
       <p className="read-the-docs">
         {StringBinderInstance.bind(text, {
           crowns: <a href={'//google.com'} target={'_blank'}>crowns</a>,
-          flowers: <a href={'//yandex.ru'} target={'_blank'}>flowers</a>
+          flowers: <a href={'//yandex.ru'} target={'_blank'}>flowers</a>,
+          n: <br/>,
+        })}
+      </p>
+      <p className="read-the-docs">
+        {StringBinderInstance.bind(unknownKeys, {
+          crowns: <a href={'//google.com'} target={'_blank'}>crowns</a>,
+          flowers: <a href={'//yandex.ru'} target={'_blank'}>flowers</a>,
+          n: <br/>,
+        })}
+      </p>
+      <p className="read-the-docs">
+        {StringBinderInstance.bind(oneMore, {
+          crowns: <a href={'//google.com'} target={'_blank'}>crowns</a>,
+          flowers: <a href={'//yandex.ru'} target={'_blank'}>flowers</a>,
+          n: <br/>,
         })}
       </p>
     </>

lib/StringBinder.ts

@@ -84,6 +84,9 @@ class StringBinder {
 
       keyIdx = -1;
 
+      if (j >= len || str[j] !== StringBinder.SpecialSymbol)
+        continue;
+
       if(!sub.length) {
         buf += str[i];
         continue;
@@ -92,7 +95,7 @@ class StringBinder {
       chain.push(sub);
       buf += StringBinder.Anchor;
 
-      i += sub.length;
+      i += sub.length + 1;
     }
 
     return {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rejchev/react-string-binder",
   "private": false,
-  "version": "1.0.7",
+  "version": "1.1.0",
   "type": "module",
 
   "author": {