# highlight-text-in-raw-html

> 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 '

Latest version **0.0.9** (published 2019-01-08) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install highlight-text-in-raw-html
pnpm add highlight-text-in-raw-html
yarn add highlight-text-in-raw-html
bun add highlight-text-in-raw-html
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.0.9 |
| Published | 2019-01-08 |
| First published | 2019-01-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 17.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Andrew Kang |
| Maintainers | andrew-kang-g |
| Keywords | syntax, highlight, tag, text, html, raw html, react, babel, bold |

## Links

- npm: https://www.npmjs.com/package/highlight-text-in-raw-html
- Repository: https://github.com/Andrew-Kang-G/highlight-text-in-raw-html
- Homepage: https://github.com/Andrew-Kang-G/highlight-text-in-raw-html#readme
- Issues: https://github.com/Andrew-Kang-G/highlight-text-in-raw-html/issues
- npm.io page: https://npm.io/package/highlight-text-in-raw-html

## Dependencies (5)

- [babel-loader](https://npm.io/package/babel-loader.md) ^8.0.4
- [babel-preset-env](https://npm.io/package/babel-preset-env.md) ^1.7.0
- [babel-preset-stage-0](https://npm.io/package/babel-preset-stage-0.md) ^6.24.1
- [babel-plugin-transform-runtime](https://npm.io/package/babel-plugin-transform-runtime.md) ^6.23.0
- [babel-plugin-transform-object-rest-spread](https://npm.io/package/babel-plugin-transform-object-rest-spread.md) ^6.26.0

## Alternatives

- [@oh-my-pi/pi-natives](https://npm.io/package/@oh-my-pi/pi-natives.md) — 51.8K weekly downloads
- [@capgo/capacitor-light-sensor](https://npm.io/package/@capgo/capacitor-light-sensor.md) — 3.0K weekly downloads
- [@heyhuynhgiabuu/pi-diff](https://npm.io/package/@heyhuynhgiabuu/pi-diff.md) — 492 weekly downloads
- [@lotsa/verdant-lang-asm](https://npm.io/package/@lotsa/verdant-lang-asm.md) — 38 weekly downloads
- [new-era-syntax](https://npm.io/package/new-era-syntax.md) — 20 weekly downloads

## Recent versions

- 0.0.9 (latest) — 2019-01-08
- 0.0.8 — 2019-01-08
- 0.0.7 — 2019-01-08
- 0.0.6 — 2019-01-07

## README

# 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.

``` javascript

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)

``` javascript

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

<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.

``` html

<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

``` javascript

/* @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);

```

---
_Source: https://npm.io/package/highlight-text-in-raw-html · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._