jselection

v0.1.12

Published

2 years ago

extended '''Selection''' class allows selecting by content and index

Downloads

0High
0Medium
0Low

webrary

typescript library webpack browserify Selection

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>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

jSelection

Installation

Usage

API

XWindow: Extended Window class

XWindow.from

XWindow.select

XSelection: Extended Selection class

XSelection.getTextNodes

XSelection.getOccurrence