I am not sure why item count parentheses aren't being removed in this tiny fiddle example.
EDIT: Here is my result from looking at the working answer.
$.fn.itemcount = function(){
var text = $(this).text();
text = text.replace("(","").replace(")","");
$(this).text(text);
};
$("#prc").itemcount();
$.fn.sidecartcost = function(){
var el = $(this);
var text = $(this).text();
text = text.replace("Your sub total is", "").replace(". ", "");
$(this).text(text);
};
$('.SideCartCost').sidecartcost();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="prc">(7 Items)</div>
<div class="blank">Woo</div>
<div class="SideCartCost">Your sub total is $300.03. </div>
you are not replacing the html/text of the div like so http://jsfiddle.net/x5jeL/1/
Related
Get only text value where the user clicked it
HTML code
<body>
<div id="test">
<pre>
zelketg 1
gcaotydv 14
cdbot_i 11
pacdhss12 1
boters 1
<pre>
</div>
</body>
In the above code I am using pre tag, I have a long list of user so I want every user on next line
When the user click on zelketg, only I want zelketg under javascript alert box instead of whole text.
I tried the below JavaScript but it didn't works, It give me the whole text under div
$(document).click(function(event) {
var text = $(event.target).text();
alert(text);
});
Contents of pre tag are not identifiable as an individual nodes, so you need to do some pre-conditioning so that they can be identified as an individual nodes.
var preNode = document.querySelector( "pre" );
function preCondition()
{
var text = preNode.innerText;
preNode.innerHTML = text.split("\n").map( s => "<div>" + s + "</div>" ).join( "" );
}
preCondition();
Now you can add a click event handler on the pre-tag
preNode.addEventListener( "click", function(){
console.log(event.target.innerHTML);
});
Demo
var preNode = document.querySelector( "pre" );
function preCondition()
{
var text = preNode.innerText;
preNode.innerHTML = text.split("\n").map( s => "<div>" + s + "</div>" ).join( "" );
}
preCondition();
preNode.addEventListener( "click", function(){
console.log(event.target.innerHTML);
});
<div id="test">
<pre>
zelketg 1
gcaotydv 14
cdbot_i 11
pacdhss12 1
boters 1
</pre>
</div>
Try as follows might help
$(document).click(function(event) {
var text = $(event.target).text();
alert(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<div id="test">
<pre>
<i>zelketg 1</i>
<i>gcaotydv 14</i>
<i>cdbot_i 11</i>
<i>pacdhss12 1</i>
<i>boters 1</i>
<pre>
</div>
</body>
Go over each line beforehand and turn them into span elements so you can handle them separately.
var lines = $("#test pre").text().split("\n");
$("#test pre").empty();
$.each(lines, function(n, elem) {
$("#test pre").html( $("#test pre").html()+'<span>'+elem+'</span><br>');
});
$('#test pre').click(function(event) {
var text = $(event.target).text();
console.log(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<div id="test">
<pre>
zelketg 1
gcaotydv 14
cdbot_i 11
pacdhss12 1
boters 1
<pre>
</div>
</body>
Post-Fork of #Nisal Edu
You can replace your whole pre element as the following example for this you don't need any other library alike.
<body>
<div id="test">
<pre id="test_pre">
zelketg 1
gcaotydv 14
cdbot_i 11
pacdhss12 1
boters 1
</pre>
</div>
</body>
<script>
function getText(elem)
{
var user_name = elem.childNodes[0].innerHTML;
var user_id = elem.childNodes[1].innerHTML;
alert(user_name+","+user_id);
}
(function(){
var pre_tag = document.getElementById("test_pre");
var pre_text = pre_tag.innerHTML;
var pre_elem = pre_text.split('\n');
var doc_string ="" ;
for(item in pre_elem)
{
var arr = pre_elem[item].trim().replace(" ",",").split(",");
doc_string += "<p onclick='javascript:return getText(this);'><span>"+arr[0] +"</span><span> "+ arr[1] +"</span></p>";
}
document.getElementById("test_pre").innerHTML = doc_string;
})();
</script>
I have code :
To search a single string and return whole string.
$(document).ready(function() {
$('button').click(function (){
var search = $('#input').val();
var str = $('#file').html();
var output=str.match(search );
document.getElementById("result").innerHTML = output;
if (search.value.length > 0) {
$(".oh").show().filter(function () {
return $('#input').find('li').text().toLowerCase().indexOf($("search").val().toLowerCase()) == -1;
}).hide();
}
else {
$(".oh").show();
document.getElementById( 'oh' ).style.display = 'block';
}
});
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="searchbox.js"></script>
</head>
<body>
<input type="text" id="input">
<button>solve</button>
<p id="result"></p>
<div id="file"class="oh"style="display:none;">
<li>beatiful</li>
<li>happy sunday</li><li>good morning</li><li>good evening</li><li>oh my god</li>I like u</li><li>wonderful day</li>
<li>good aftnoon</li>
</div>
</body>
</html>
For example:
`input = good
output = good morning,
good night,
good noon`
`input = morning,
output = good morning`
Its like a search box inside html
Please help me with any suggestion or correct my code its more helpful for me i have use jquery and index() are using but its not work
Check this, i have updated your markup little bit and changed the code to work:
$(document).ready(function() {
$('button').click(function() {
var search = $('#input').val(); // get the search term
var $lis = $('#file li'); // all the existing li items to filter/search
var $resUl = $('#result ul'); // the ul to show results
var o = $lis.map(function() { // map will let you loop through list items
if (this.textContent.indexOf(search) != -1) { // check if the current li in the iteration has the search term
return $(this).clone(); // if yes then return a copy of it.
}
}).get(); // .get() will create an array when used with .map()
$resUl.empty(); // always clear the result ul
$.each(o, function(i, item) { // loop through the array created via filter
$resUl.append(item).find('li').fadeIn(); // here append them as lis are hidden so fade them in the view to show.
});
});
});
#file li {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<input type="text" id="input">
<button>solve</button>
<div id="result">
<ul></ul>
</div>
<ul id="file">
<li>beatiful</li>
<li>happy sunday</li>
<li>good morning</li>
<li>good evening</li>
<li>oh my god</li>
<li>I like u</li>
<li>wonderful day</li>
<li>good aftnoon</li>
</ul>
$(document).ready(function() {
$('button').click(function (){
var searchval = $('#input').val();
var str = $('#file').html();
var rep2 = str.split('</li>');
var rep3 = rep2.filter(function(item){
if(item.search(searchval) !=-1){
return item;
}
})
document.getElementById("result").innerHTML = rep3;
});
});
I'd like to be able to target (and then remove) this string of text:
[UPLOAD]any-possible_FILEname.ANY[/UPLOAD]
HTML:
var filenameRegex = new RegExp("\w\d\.");
$('.posts').contents().filter(':contains([UPLOAD])').filter(':contains([/UPLOAD])').filter(function() {
return filenameRegex.test($(this).text());
console.log('yep');
}).remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="posts">
This is a forum post with lots of blabbing in it.
[UPLOAD]this-is-a-random-unknown-filename.jpg[/UPLOAD]
(Note the above always begins with [UPLOAD] and ends
with [/UPLOAD]. Also note that between these 'tags'
is 1 filename of some kind, such as an image or audio
or text file)
</span>
Thanks, much obliged.
var filenameRegex = /\[UPLOAD][\w\.\-]+\[\/UPLOAD]/gi;
$('.posts').filter(':contains([UPLOAD]):contains([/UPLOAD])').filter(function(i,e) {
return filenameRegex.test($(e).text());
}).each(function(i,e){
$(e).text($(e).text().replace(filenameRegex,''));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="posts">
This is a forum post with lots of blabbing in it.
[UPLOAD]this-is-a-random-unknown-filename.jpg[/UPLOAD]
(Note the above always begins with [UPLOAD] and ends
with [/UPLOAD]. Also note that between these 'tags'
is 1 filename of some kind, such as an image or audio
or text file)
</span>
The regex you need is:
/\[UPLOAD\](.*)\[\/UPLOAD\]/gi
So your code should be like:
var filenameRegex = new RegExp("/\[UPLOAD\](.*)\[\/UPLOAD\]/gi");
$('.posts').contents().filter(':contains([UPLOAD])').filter(':contains([/UPLOAD])').filter(function(){
return filenameRegex.test($(this).text());
console.log('yep');
}).remove();
Not a regular expression, but this seems to do the trick:
var text = 'hello [UPLOAD]very[/UPLOAD] [UPLOAD]cruel[/UPLOAD] world';
var start = '[UPLOAD]';
var end = '[/UPLOAD]';
var index = text.indexOf(start);
while (index > -1)
{
var end_index = text.indexOf(end);
var removed_text = text.substring(index, end_index + end.length));
text = text.substring(0, index) + text.substring(end_index + end.length);
index = text.indexOf(start);
}
I have multiple h2 tags and every tag contains text and has a custom attribute called data-options. This attribute has multiple options separated by commas and one of these options is the h2 tag text itself.
HTML:
<h3 id='test' data-options='happy,sad,fantastic'>sad</h3>
<h3 id='test2' data-options='1,2,3,4'>3</h3>
jQuery:
var indexArray = ['happy','1'];
$('h3').each(function(i){
var $this = $(this),
value = $this.text(),
code = $('body').html();
code = code.replace(value, indexArray[i]);
$('body').html(code);
});
This is what I expect:
<h3 id='test' data-options='happy,sad,fantastic'>happy</h3>
<h3 id='test2' data-options='1,2,3,4'>1</h3>
Instead I get this:
<h1 id="test" data-options="happy,happy,fantastic">sad</h1>
<h3 id="test2" data-options="1,2,3,4">3</h3>
As you can see the script changes the first text it encounters, not the one inside the tags.
This is a working demo for the script : http://jsfiddle.net/fs1sfztx/
It makes no sense to do a replace unless you're searching. Which means you have to be provided what to search for and what to replace it with. So far only the text to in the h3 is given.
Assuming that each index in indexArray matches the index of each h3 element, then you can compare the current indexArray element indexArray[i] with each of the words in the corresponding elements data-options attribute. When a matches, set the innerText prop to that word.
var indexArray = ['happy','1'];
$('h3').text( function( i, txt ) {
var that = $(this);
var ntxt = txt;
$.each( that.data('options').split(','), function( j, u ) {
indexArray[i] !== u || (ntxt = u);
});
return ntxt;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3 id='test' data-options='happy,sad,fantastic'>sad</h3>
<h3 id='test2' data-options='1,2,3,4'>3</h3>
If all you wanted is to play with the replace method, then you could use something like this:
var indexArray = ['happy','1'];
var allhtml = $('body').html();
$('h3').each( function( i ) {
var txt = $(this).text();
var re = new RegExp( '>' + txt + '<', 'g' );
allhtml = allhtml.replace( re, '>' + indexArray[i] + '<' );
});
$('body').html( allhtml );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3 id='test' data-options='happy,sad,fantastic'>sad</h3>
<h3 id='test2' data-options='1,2,3,4'>3</h3>
I'm trying to find the text of the span with the class name "link" but i have problems.
<div id="item-0" class="box">
.......
</div>
<div id="item-1" class="box">
<p><strong>Link: </strong><span class="link">http://www.domain.com/list44/</span></p>
<p><input type="submit" value="submit" class="load-button2"></p>
</div>
<div id="item-2" class="box">
.......
</div>
$(".load-button2").click(function(){
var id = $(this).closest('.box').attr('id');
alert(id); // showing the right box ID
var linkp = $(/*** what should i put here? ***/ "#" + id + " .link").text;
});
You should just be able to do:
$(".load-button2").click(function(){
var id = $(this).closest('.box').attr('id');
alert(id); // showing the right box ID
var linkp = $("#" + id).find(".link").text();
});
Although, a more elegant solution would be:
$(".load-button2").click(function(){
var linkp = $(this).closest('.box').find(".link").text();
});
You can try this code:
$(".load-button2").click(function(){
var text = $(this).closest('.box').find('.link').text();
});
$(".load-button2").click(function(){
var id = $(this).closest('.box').attr('id');
alert(id); // showing the right box ID
//var linkp = $(what should i put here / "#" + id = " .link").text;
var linkp = $("#"+id).find(".link").text;
});
An alternative so you don't have to do another full DOM traversal (since you already get the container).
$(".load-button2").click(function(){
var container = $(this).closest('.box');
var id = container.attr('id');
alert(id); // showing the right box ID
var linkp = container.find('.link').text();
alert(linkp);
});
See it in action.