-
Notifications
You must be signed in to change notification settings - Fork 46
/
replace-text.html
211 lines (203 loc) · 11.1 KB
/
replace-text.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
---
title: Replace Text Online | Developer Tools
layout: post
---
<html>
<head>
<!-- Meta tags common for website -->
{% include common-meta %}
<title>{{ page.title }}</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<meta name="description" content="This is easy to use open source tool to find and replace any text or string in a large text." />
<meta name="keywords" content="online,tool,find,replace,online,substitute,web,opensource" />
<!-- CSS for the site theme -->
{% include theme-css %}
<!-- Annoying IE fixes -->
{% include ie-fixes %}
</head>
<body class="hold-transition skin-green sidebar-mini">
<!-- Site wrapper -->
<div class="wrapper">
<!-- header tag from theme -->
{% include theme-header %}
<!-- Sidebar for the whole website -->
{% include theme-sidebar %}
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Main content -->
<section class="content">
<div class="row">
<!-- left column -->
<div class="col-md-6">
<div class="box box-info">
<div class="box-header with-border">
<h1 class="box-title">Replace Text Tool: Substitute Text</h1>
</div>
<!-- /.box-header -->
<!-- form start -->
<div class="box-body">
<form role="form">
<div class="form-group">
<label for="intext">Your Text</label>
<textarea class="form-control" rows="10" id="intext" placeholder="Enter your text here" autofocus></textarea>
</div>
<div class="form-group">
<label for="customstopwords">Find Text</label>
<textarea class="form-control" rows="2" id="findtext" placeholder="Enter string to find here"></textarea>
</div>
<div class="form-group">
<label for="customstopwords">Replace with</label>
<textarea class="form-control" rows="2" id="replacetext" placeholder="Enter text to replace with"></textarea>
</div>
</form>
</div>
<!-- /.box-body -->
<div class="box-footer">
<div class="row">
<div class="col-xs-3">
<button type="button" class="btn btn-success" id="replace">Find & Replace<i class="fa fa-fw fa-arrow-right"></i></button>
</div>
</div>
<br/>
<div class="row">
<div class="col-xs-3">
<button type="button" class="btn btn-info" id="replaceIgnorecase">Find & Replace (Ignore Case)<i class="fa fa-fw fa-arrow-right"></i></button>
</div>
</div>
</div>
<!-- /.box-footer -->
</div>
</div>
<div class="col-md-6">
<div class="box box-success">
<div class="box-header with-border">
<h3 class="box-title">Copy Your Updated Text From Here</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<div class="form-group">
<label for="output">Updated / Replaced Text</label>
<textarea class="form-control" id="output" rows="10" placeholder="Copy updated text from here"></textarea>
</div>
</div>
<!-- /.box-body -->
</div>
<div class="box box-success">
<div class="box-header with-border">
<h3 class="box-title">Replace Summary</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<div class="form-group">
<label for="matchcount">Match Count: </label>
<span id="matchcount">0</span>
</div>
</div>
<!-- /.box-body -->
</div>
</div>
</div>
</section>
<section class="content">
<div class="box box-success">
<div class="box-header with-border">
<h3 class="box-title">About Find and Replace Text Tool</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<img class="img-responsive" src="images/replace-text.png" alt="Online string replace tool" title="Online string replace tool">
<p>This is a free online tool to find and replace any text. The tool finds all occurance of a string and replaces it. The output text is available for you to quickly copy/paste anywhere you like. The tool is opensource and free to use. It works in any modern browser. This tool uses a a simple browser based JavaScript code to replace text in any language.</p>
</div>
<!-- /.box-body -->
</div>
<div class="box box-success">
<div class="box-header with-border">
<h3 class="box-title">Can I replace ignoring case?</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<p>Yes, this tool also supports both case sensitve and ignore case match. You need to use the "Ignore case" button for doing case insensitive replace.</p>
</div>
<!-- /.box-body -->
</div>
<div class="box box-success">
<div class="box-header with-border">
<h3 class="box-title">Can I replace any non-English text?</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<p>Yes, this tool supports any language your browser can support. You can replace text in English, German, French, Spanish and Many other languages supported by modern browsers.</p>
</div>
<!-- /.box-body -->
</div>
<div class="box box-success">
<div class="box-header with-border">
<h3 class="box-title">Can I Replace large text?</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<p>Yes, you can use the tool to find and replace any string in a very large text input. The size of text may be limited by the browser limits and the amount you can copy comfortable. Many times you may see slowness in copy/paste due to text being very large e.g. hudnreds of megabyte text in clipboard can be hard to handle on computer with small RAM. The tool will work as long as you can copy/paste some text here.</p>
</div>
<!-- /.box-body -->
</div>
<div class="box box-success">
<div class="box-header with-border">
<h3 class="box-title">What are common uses of this tool?</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<p>Find and replace is a commonly used functionaly available in all modern text editors. This is absolutely required for updating a large document. This tool gives you access to this functionality in your browser so you can use it even on your mobile phone. </p>
<img class="img-responsive" src="images/replace-example.png" alt="Online string replace example from tool" title="Online string replace example from tool">
</div>
<!-- /.box-body -->
</div>
<div class="box box-success">
<div class="box-header with-border">
<h3 class="box-title">Why do we replace strings?</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<p>Replace string a common way to fix typo or other mistakes in any document or text. Using a replace all function you can easily and quickly change the text. This saves time and effort when the string to replace has thousands of occurrance.</p>
</div>
<!-- /.box-body -->
</div>
</section>
{% include addthis %}
</div>
<!-- /.content-wrapper -->
{% include theme-footer %}
</div>
<!-- ./wrapper -->
{% include theme-bottom-js %}
</body>
<script src="plugins/selectOnFocus/jquery.selectOnFocus.min.js"></script>
<script src="javascripts/fromdev-utils.js"></script>
<script>
const doReplace = (ignoreCase) => {
const input = $("#intext").val();
const findText = $("#findtext").val();
const replaceText = $("#replacetext").val() || '';
if(input && findText) {
const replaced = (ignoreCase) ? (input || '').replaceAll(new RegExp(RegextUtils.escapeRegex(findText), 'ig'), replaceText)
: (input || '').replaceAll(findText, replaceText);
$("#output").val(replaced);
//match counts
const matches = (ignoreCase) ? (input || '').matchAll(new RegExp(RegextUtils.escapeRegex(findText), 'ig'), replaceText)
: (input || '').matchAll(findText, replaceText);
$("#matchcount").text(([...matches]).length);
}
};
$(document).ready(function() {
$("#replace").click(function(){
doReplace();
});
$("#replaceIgnorecase").click(function(){
doReplace(true);
});
$("#intext").selectOnFocus();
$("#output").selectOnFocus();
$('#string-utility-category').addClass('active');
});
</script>
</html>