Highlight-text-in-raw-html

Overview

Highlight-text-in-raw-html is an open source JavaScript library. It is useful when highlighting a target text outside tags such as html or xml. You can insert whatever tags before or after a target text! if you insert a tag like '<span style="color:yellow">' before your target text, it becomes yellow, or a tag like '<b>' makes the text bold, or you can insert string. This action never affects string on whatever tags as the library consists of simple and strong methods using regular expressions.

Example Usage

Installation & Usage

There are parameters as examples to be used in the usage below.

 
var where = '<p></p>\n' +
            '<img style="max-width: 50%;float:none;height: 200px;margin-top : 3%" src="/image/showWorkOrderImg?fileName=12345.png" alt="undefined"/>\n' +
            '<p> abc  777 </p>\n' +
            '<p id="abc" class="def xxx gh" style="text-align:center;">abcabc 555 ' +
            '<p style="color: rgb(127,127,127);">Please email me at gogogo@mail.com </p>&nbsp;</p>\n' +
            '<p><img style="float:none;height: 200px;margin-top : 3%" src="/image/showWorkOrderImg?fileName=123456.png" alt="undefined"/></p>\nabc';
 
var startTag = '<span style="color:yellow">';
var endTag = '</span>';
var what = 'abc';
var caseSensitive = true;

Now, let's look at how to use the library.

For ES6 npm users, 'npm install --save highlight-text-in-raw-html'. (https://www.npmjs.com/package/highlight-text-in-raw-html)

 
import HighlightTextInRawHtml from 'highlight-text-in-raw-html';
 
let result = HighlightTextInRawHtml.insertByWhat(startTag, endTag, what, where, caseSensitive);
let result2 =  HighlightTextInRawHtml.insertByType(startTag, endTag, 'integer', result);
let finalResult = HighlightTextInRawHtml.insertByType(startTag, endTag, 'email', result2);

For ES5 users (refer to Github),

 
<html>
<body>
    <p></p>
    <script src="../dist/highlight-text-in-raw-html.bundle.js"></script> 
    <script type="text/javascript">
 
        var result =  HighlightTextInRawHtml.insertByWhat(startTag, endTag, what, where, caseSensitive);
        var result2 =  HighlightTextInRawHtml.insertByType(startTag, endTag, 'integer', result);
        var finalResult = HighlightTextInRawHtml.insertByType(startTag, endTag, 'email', result2);
              
    </script> 
</body>
</html>

Let's print the variable 'finalResult' above. The word 'abc', integer and email patterns have been surrounded by the custom tags.

 
<p></p>
<img style="max-width: 50%;float:none;height: 200px;margin-top : 3%" src="/image/showWorkOrderImg?fileName=12345.png" alt="undefined"/>
<p> <span style="color:yellow">abc</span>  <span style="color:yellow">777</span> </p>
<p id="abc" class="def xxx gh" style="text-align:center;"><span style="color:yellow">abc</span><span style="color:yellow">abc</span> <span style="color:yellow">555</span> <p style="color: rgb(127,127,127);">Please email me at <span style="color:yellow">gogogo@mail.com</span> </p>&nbsp;</p>
<p><img style="float:none;height: 200px;margin-top : 3%" src="/image/showWorkOrderImg?fileName=123456.png" alt="undefined"/></p>
<span style="color:yellow">abc</span>

Syntax

 
/* @params 
*   string : startTag, endTag, what, where
*   boolean : caseSensitive (not necessaray, default : false)
*/
HighlightTextInRawHtml.insertByWhat(startTag, endTag, what, where, caseSensitive);
 
/* @params 
*   string : startTag, endTag, type (only 'integer', 'email' available for the current version), where
*/
HighlightTextInRawHtml.insertByType(startTag, endTag, type, where);