Jselection NPM

jSelection

Extended Selection series allows selecting by content and index

Installation

   npm install jselection --save

   bower install jselection  --save

Usage

with <script>(in browser)

<script type="application/javascript" src="node_modules/jselection/dist/jSelection.browser.js"></script>

with import(in Typescript / ES6)

import {XWindow, XSelection} from "jSelection";
// XWindow.from(...);

import * as jSelection from "jSelection";
// jSelection.XWindow.from(...);

with require

const jSelection = require("jSelection");

API

`XWindow`: Extended `Window` class

`XWindow.from`

create instance from a html Element(a XWindow instance is created and returned)

public static from(root: Element = document.body): XWindow;

create XWindow from element with ID body

let xWindow = XWindow.from(document.querySelector('#body'));

`XWindow.select`

select by content and index (a XSelection instance is created and returned)

public select(opt_text?: string, opt_nth: number = 1, opt_select: boolean = false): XSelection;

select the 5th hello (create XSelection instance from the 5th hello)

let xSelection = xWindow.select("hello", 5);

select by Mouse (create XSelection instance from the Mouse selected text)

let xSelection = xWindow.select();

`XSelection`: Extended `Selection` class

`XSelection.getTextNodes`

get Text Nodes of the XSelection

public getTextNodes(): Array<XText>;
interface XText extends Text {...}

`XSelection.getOccurrence`

get the Occurrence of the selected text from XSelection instance

public getOccurrence(): Occurrence;

interface Occurrence {
    nth: number; //the content is the `nth` occurrence
    position: number; //the content starts at `position`
}

Example

<html lang="en">
<head>
    <script type="application/javascript" src="dist/jSelection.browser.js"></script>
    <script type="application/javascript" src="bower_components/jQuery/dist/jquery.min.js"></script>
    <style type="text/css">
        .markup {
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
text start: 
<div id="body">
    this is a test
    <span>this is a test</span>
    this is a test
    <p> this is a test </p>
    this is a test
</div>
text end: 
<script type="application/javascript">
    var xWindow = jSelection.XWindow.from(document.querySelector("#body"));
    var xSelection = xWindow.select("test", 5);
    var nodes = xSelection.getTextNodes();
    console.log(nodes);
    var markup = $(nodes).wrapAll("<span class='markup'/>");
</script>
</body>
</html>

typescript library webpack browserify Selection

@everything-registry/sub-chunk-1981

5 years ago

7 years ago

7 years ago

7 years ago

7 years ago