I am using some Jquery to insert a element before another element as below:
$(document).ready(function () {
$('a[href*="FolderCTID"]').each(function () {
$(this).closest('tr').find('div[class^="ExternalClass"]').before(this);
});
});
I am able successfully insert before the element
But, .find('div[class^="ExternalClass"]') in the script above is the element i want to truncate before inserting on runtime.
Please help me, how i can truncate the text before i actually insert
Thanks in advance
var someelement = $(this).closest('tr').find('div[class^="ExternalClass"]');
someelement.html(function(i,h){ return h.substring(0,10); });
someelement.before(this);
Try this:
var truncateLength = 10;
$(document).ready(function(){
$('a[href*="FolderCTID"]').each(function(){
var div = $(this).closest('tr').find('div[class^="ExternalClass"]');
var text = div.text();
div.text(text.subString(0, text.length > truncateLength ? truncateLength : text.length));
div.insertBefore(this); // insertBefore rather than before
});
});
Related
I have the next element:
<div id = "mydiv">
abc
<span>123</span>
</div>
document.getElementById('mydiv').textContent returns me: abc123
I want to get only the text of mydiv ('abc'). so I wonder if there is an option to use jquery in order to get it? maybe get all the content of an element except for span element..
and then getting his text..
p.s. I know I can wrap abc in span and then get it, but I wonder if there is another option to do it without changing my element..
DEMO JSFIDDLE
Try this ,
console.log($("#mydiv").clone() .children().remove().end().text());
You must select yours DIV by ID, then run through its "childrens" property and check their nodeType (textNodes has 3);
var div = document.getElementById("mydiv");
var result = "";
for(var i = 0; i < div.length; i++){
var node = div[i];
if( node.nodeType === 3 ){
result += node.data;
}
}
console.log(result);
Since you've included jQuery you can do this
var p = $('#mydiv').clone();
p.find('span').remove();
console.log(p.text());
DEMO
Using jQuery:
$(document).ready(function() {
alert($('#mydiv span').text());
});
If you expect to have more html elements inside your div, user regular expression to extract plain text after getting whole html content from div.
var re = /<.+>/;
var str = "abc<span>123</span>";
var newstr = str.replace(re, "");
Should give "abc"
i want to extract value from the string
here is my Code
Js
var a = "<strong>1954</strong>im the text";
var pageNum = a.split("<strong>").slice(1)
alert(pageNum);
i simply want to extract value in strong tag i have tried but so far no luck
You can find the strong element inside the div and then get its contents using .text()
var pageNum = $("div").find('strong').text()
With the update
jQuery(function(){
var a = '<strong>1954</strong>im the text';
var pageNum = $(a).filter('strong').text();
alert(pageNum);
})
Demo: Fiddle
Demo: Fiddle
var text= $("div strong").text();
updated
var text= $(a).filter('strong').text();
Here is how you get your Value from the string without jQuery:
var pageNum = a.substring(a.indexOf('<strong>' + 8, ), a.indexOf('</strong>'))
I'm painfully new to jQuery and I need to grab the value on change of a text input box with an id of id[2][t] and display that text in a div to be styled later on (also styled with jQuery).
This is the input box code:
<input id="id[2][t]" name="id[2][t]" maxlength="20" type="text">
This is the div I am trying to display it in:
<div id="textpreview"></div>
This is what I have tried, among other variation with no success:
$(document).ready(function() {
$('#id\\[2\\]\\[t\\]').change(function() {
var txtval = $('#id\\[2\\]\\[t\\]').text();
$("#textpreview").val(txtval);
});
});
I know the brackets are a problem but they need to remain for other reasons.
Any ideas?
$( document.getElementById( "id[2][t]" ) ).change( function(){
$( "#textpreview" ).text( this.value );
} );
You might consider revising your IDs (though I'm guessing they might be auto-generated). According to this question your IDs are invalid against the spec
Use the attribute selector instead:
var sel = $("[id='id[2][t]']");
sel.change(function() {
$("#textpreview").val(sel.text());
});
Plain Old JavaScript:
var elem = document.getElementById('id[2][t]');
elem.onchange = function()
{
var elem = document.getElementById('textpreview');
elem.removeChild(elem.firstChild)
elem.appendChild(document.createTextNode(this.value));
}
Ahhh... now doesn't that feel better?
You have val and text backwards. Swap them:
$('#id\\[2\\]\\[t\\]').change(function() {
var txtval = $('#id\\[2\\]\\[t\\]').val();
$("#textpreview").text(txtval);
});
val is used to get the value of the textbox. text to set the text within the div.
You can further simplify the code by using this instead of re-querying the element.
$('#id\\[2\\]\\[t\\]').change(function() {
var txtval = this.value;
$("#textpreview").text(txtval);
});
You can try using the attribute selector instead of the id selector.
$('[id="id[2][t]"]')
How can by jQuery get value inside tag b?
<span>
<b>hi_1</b>
<b>hi_2</b>
<b>hi_3</b>
<b>hi_4</b>
<span>
I want this output with jQuery: hi_1, hi_2, hi_3, hi_4
Please give me example in jsfiddle.
Are you looking for something like this?
http://jsfiddle.net/ZDYnq/
$(document).ready(function() {
var textArr = [];
$('span b').each(function() {
textArr.push($(this).text());
});
alert(textArr.join(', '));
});
To get the value inside a specific HTML tag in jQuery you can use the text function. This combined with a selector gets the output you're looking for
$('span b').each(function() {
console.log($(this).text());
});
JSFiddle
JSFiddle with commas
This is cool
var x = $("span b").map(function() {
return $(this).text();
}).toArray().join(", ");
Demo here
Discussed here
How can I replace a specific text with HTML objects?
example:
var text = "some text to replace here.... text text text";
var element = $('<img src="image">').event().something...
function ReplaceWithObject(textSource, textToReplace, objectToReplace);
So I want to get this:
"some text to replace < img src...etc >.... text text text"
And I would like manipulate the object element without call again $() method.
UPDATE:
I solved.
thanx #kasdega, i made a new script based in your script, because in your script i can't modify the "element" after replace.
This is the script:
$(document).ready(function() {
var text = "some text to replace here.... text text text";
var element = $('<img />');
text = text.split('here');
$('.result').append(text[0],element,text[1]);
$(element).attr('src','http://bit.ly/mtUXZZ');
$(element).width(100);
});
I didnt know that append method accept multiples elements.
That is the idea, only need to automate for multiple replacements
thanx to all, and here the jsfiddle
do a split on the text you want to replace then use the array indexes 0 and 1...something like:
function ReplaceWithObject(textSource, textToReplace, objectToReplace) {
var strings = textSource.split(textToReplace);
if(strings.length >= 2) {
return strings[0] + objectToReplace.outerHTML() + strings[1];
}
return "";
}
UPDATE: I found another SO post Get selected element's outer HTML that pointed me to a tiny jquery plugin that helps here.
I believe this jsfiddle has what you want. outerHTML is the tiny jquery plugin I included in the JSFiddle.
You can also use replace which will reduce some code: http://jsfiddle.net/kasdega/MxRma/1/
function ReplaceWithObject(textSource, textToReplace, objectToReplace) {
return textSource.replace(textToReplace, objectToReplace.outerHTML());
}
function textToObj (text,obj,$src){
var className = "placeholder-"+text;
$src.html($src.html().replace(text,"<div class='"+className+"'></div>"));
$("."+className).replace(obj);
}
you can use $(selector).outerHtml to get the html string of an element
You can replace the html directly: http://jsfiddle.net/rkw79/qNFKF/
$(selector).html(function(i,o) {
return o.replace('old_html','new_html');
})