jQuery Plugin For Selecting Replacing Text textrange - Download jQuery Plugin For Selecting and Replacing Text - textrange

Download jQuery Plugin For Selecting and Replacing Text – textrange

By Posted on

This time I will share jQuery Plugin and tutorial about jQuery Plugin For Selecting and Replacing Text – textrange, hope it will help you in programming stack.

jQuery Plugin For Selecting Replacing Text textrange - Download jQuery Plugin For Selecting and Replacing Text - textrange
File Size: 7.23 KB
Views Total: 4605
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

textrange is a jQuery text control plugin that allows you select a range of text in input field and textarea and replace the selected text with given text.

Installation:

view source
1 # NPM
2 $ npm install jquery-textrange
3  
4 # Bower
5 $ bower install jquery-textrange

How to use it:

1. Include jQuery library and textrange plugin on the page

view source
1 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
2 <script src="jquery-textrange.js"></script>

2. Create a textarea with some more content

view source
1 <textarea id="textarea" name="textarea">
2 ...
3 </textarea>

3. Create some buttons to select and replace text in the textarea

view source
01 <div>Select a substring starting at
02 <input type="text" id="char-start" name="char-start" value="30">
03 and ending at
04 <input type="text" id="char-end" name="char-end" value="55">
05 <input type="button" id="selection-set" name="selection-set" value="Go!!">
06 </div>
07  
08 <div> Replace the selected text with:
09 <input type="text" id="replace-text" name="replace-text" value="some text">
10 <input type="button" id="selection-replace" name="selection-replace" value="Go!!">
11 </div><br type="_moz">

4. The javascript

view source
01 <script>
02 $(document).ready(function() {
03    $('#textarea').bind('up<a href="https://www.jqueryscript.net/time-clock/">date</a>Info keyup mousedown mousemove mouseup', function() {
04       var range = $(this).textrange();
05  
06       $('#info .property').each(function() {
07          if(typeof range[$(this).attr('id')] !== 'undefined') {
08             if($(this).attr('id') === 'text') {
09                range[$(this).attr('id')] = range[$(this).attr('id')].replace(/n/g, "\n").replace(/r/g, "\r");
10             }
11  
12             $(this).children('.value').html(range[$(this).attr('id')]);
13          }
14       });
15    });
16  
17  
18    $('#selection-set').click(function() {
19       $('#textarea').textrange('set', $('#char-start').val(), $('#char-end').val()).trigger('updateInfo').focus();
20    });
21  
22    $('#selection-replace').click(function() {
23       $('#textarea').textrange('replace', $('#replace-text').val()).trigger('updateInfo').focus();
24    });
25 });
26 </script>

Change logs:

v1.4.0 (2017-04-29)

  • first arg can be string or object

2014-11-11

  • Bug fixes.

2014-08-13

  • A few bug fixes.

2014-08-02

  • AMD compatible

2013-12-08

  • putting focus check that ran on all methods in entry method

This awesome jQuery plugin is developed by dwieeb. For more Advanced Usages, please check the demo page or visit the official website.

source : jqueryscript.net

Related posts: