Develop Reference

Javascript find unparented text within element [duplicate]

I want to select the text inside the div element and wrap it with a <b> tag. The <b> tag should only wrap to text inside div and not text inside a child element such as the <p> tag in this example.
<div>Testing
<p>Some more text inside p</p>
<p>asdasdasdasdasde p</p>
Test
</div>
I'm able to select the <p> text using the following, but I'm not able to do the same for div. I only want the text of div and not p. For this case it should select and wrap Testing and Test.
var x = $('p')[0].textContent; // this is not working for div.
console.log(x);
JSFiddle

You can use contents, and filter by node type (3 is for text node):
$('div').contents()
.filter(function(){return this.nodeType === 3})
.wrap('<b />');
Example: http://jsfiddle.net/nJqKq/8
See also: Node Types, at MDC

Via pure JS and the DOM:
HTML:
<div id="test">Testing
<p>Some more text inside p</p>
<p>asdasdasdasdasde p</p>
Test
</div>
JS:
getTextNodes(document.getElementById("test"));
function getTextNodes(parent)
{
var textNodes = [];
var nodes = parent.childNodes;
for(var i=0;i<nodes.length;i++)
{
if(nodes[i].nodeType === 3)
{
textNodes.push(nodes[i]);
wrapBold(nodes[i], parent);
}
}
}
function wrapBold(node, parent)
{
//check for whitespace text nodes
if(node.data.match(/[^\t\n\r ]/))
{
var bold = document.createElement("strong");
parent.insertBefore(bold, node);
bold.appendChild(node);
}else
{
return false;
}
}
http://jsfiddle.net/dnjsY/5/

if you dont want to wrap empty nodes use the following:
$('div').contents()
.filter(function(){
return this.nodeType === 3 && this.data.trim().length > 0
}).wrap('<b />');

DOM manipulation while preserving previous handlers

The problem:
Let's say I have a div with a text like this
<div id=”bla”>One Two Three Four Five</div>
I want to be able programmatically take any substring and wrap it into a <div> with some handler attached to it (say onlick). I want to be able to do it multiple times to different part of the text so in the end my div can end up looking like this:
<div id=”bla”>One <div id=”bla2”>Two</div> Three <div id=”bla4”>Four</div> Five</div>
The problem is how to do it?
Some thoughts:
Potentially, if I want to wrap the string Two into div, then if I just take whole div content using html(), do substring before and after Two, then do .empty() on the div and .append(beforeSubstring, <Two wrapper with some handler>, afterString) – it looks good, but it will put the beforeSubstring and afterSubstring into “” and remove all previous handlers. But I want to keep previous handlers and I don’t need “” since it messes things up for me.
Any thoughts? :)

You first need to cache your element's content like var cont = $("#bla").text();
than always use that cont before inserting your wrappers (using RegExp I suppose...) and placing the result back into that element like $("#bla").html(regexModifiedCont);
Example:
var $contentEl = $("#bla");
var content = $contentEl.text(); // Cache the original content!
$("#query").on("input", function(){
var reg = new RegExp("("+ $.trim(this.value) +")", "ig");
$contentEl.html( content.replace(reg, "<span class='clickable'>$1</span>") );
});
$("body").on("click", ".clickable", function(){
alert( $(this).text() );
});
.clickable{
background:gold;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Write a text to take <input id=query type=text>
<div id=bla>One Two Three Four Five</div>

Perhaps you're looking for something like this? =)
function wrapTag(string, tag) {
return '<'+tag+'>' + string + '</'+tag+'>';
}
// http://stackoverflow.com/questions/5379120/get-the-highlighted-selected-text
function getSelectionText() {
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
return text;
}
function highlightSelection(tag) {
var highlighted = getSelectionText();
var newContent = $('#paragraph').html()
.replace(/\s+/g,' ').trim()
.replace(highlighted, wrapTag(highlighted, tag));
$('#paragraph').html(newContent);
}
Working example:
http://plnkr.co/edit/VCpGScPR9TEjuY3mtP2j?p=preview

Jquery remove the innertext but preserve the html

I have something like this.
<div id="firstDiv">
This is some text
<span id="firstSpan">First span text</span>
<span id="secondSpan">Second span text</span>
</div>
I want to remove 'This is some text' and need the html elements intact.
I tried using something like
$("#firstDiv")
.clone() //clone the element
.children() //select all the children
.remove() //remove all the children
.end() //again go back to selected element
.text("");
But it didn't work.
Is there a way to get (and possibly remove, via something like .text("")) just the free text within a tag, and not the text within its child tags?
Thanks very much.

Filter out text nodes and remove them:
$('#firstDiv').contents().filter(function() {
return this.nodeType===3;
}).remove();
FIDDLE
To also filter on the text itself, you can do:
$('#firstDiv').contents().filter(function() {
return this.nodeType === 3 && this.nodeValue.trim() === 'This is some text';
}).remove();
and to get the text :
var txt = [];
$('#firstDiv').contents().filter(function() {
if ( this.nodeType === 3 ) txt.push(this.nodeValue);
return this.nodeType === 3;
}).remove();

Check out this fiddle
Suppose you have this html
<parent>
<child>i want to keep the child</child>
Some text I want to remove
<child>i want to keep the child</child>
<child>i want to keep the child</child>
</parent>
Then you can remove the parent's inner text like this:
var child = $('parent').children('child');
$('parent').html(child);
Check this fiddle for a solution to your html
var child = $('#firstDiv').children('span');
$('#firstDiv').html(child);
PS: Be aware that any event handlers bounded on that div will be lost as you delete and then recreate the elements

Why try to force jQuery to do it when it's simpler with vanilla JS:
var div = document.getElementById('firstDiv'),
i,
el;
for (i = 0; i< div.childNodes.length; i++) {
el = div.childNodes[i];
if (el.nodeType === 3) {
div.removeChild(el);
}
}
Fiddle here: http://jsfiddle.net/YPKGQ/

Check this out, not sure if it does what you want exactly... Note: i only tested it in chrome
http://jsfiddle.net/LgyJ8/
cleartext($('#firstDiv'));
function cleartext(node) {
var children = $(node).children();
if(children.length > 0) {
var newhtml = "";
children.each(function() {
cleartext($(this));
newhtml += $('<div/>').append(this).html();
});
$(node).html(newhtml);
}
}

jquery - get text for element without children text

for example we have this file
<div id="mydiv">
some text here
<div id="inner div">
text for inner div
</div>
</div>
i need to get #mydiv text only with some code like this :
alert($('#mydiv').text()); // will alert "some text here"

hey try this please": http://jsfiddle.net/MtVxx/2/
Good link for your specific case in here: http://viralpatel.net/blogs/jquery-get-text-element-without-child-element/ (This will only get the text of the element)
Hope this helps, :)
code
jQuery.fn.justtext = function() {
return $(this).clone()
.children()
.remove()
.end()
.text();
};
alert($('#mydiv').justtext());​

The currently accepted answer is pretty horrible in terms of performance, so I felt obligated to write a more lightweight one:
$.fn.mytext = function() {
var str = '';
this.contents().each(function() {
if (this.nodeType == 3) {
str += this.textContent || this.innerText || '';
}
});
return str;
};
console.log($('#mydiv').mytext());​

Like Ja͢ck's answer but no need for iterating explicitly (via .each()) and collecting textContents:
$('#mydiv').contents().filter(function(){return this.nodeType === 3}).text()
OR, if you can use arrow functions:
$('#mydiv').contents().filter((i, el) => el.nodeType === 3).text()

How to select a part of string?

How to select a part of string?
My code (or example):
<div>some text</div>
$(function(){
$('div').each(function(){
$(this).text($(this).html().replace(/text/, '<span style="color: none">$1<\/span>'));
});
});
I tried this method, but in this case is selected all context too:
$(function(){
$('div:contains("text")').css('color','red');
});
I try to get like this:
<div><span style="color: red">text</span></div>

$('div').each(function () {
$(this).html(function (i, v) {
return v.replace(/foo/g, '<span style="color: red">$&<\/span>');
});
});

What are you actually trying to do? What you're doing at the moment is taking the HTML of each matching DIV, wrapping a span around the word "text" if it appears (literally the word "text") and then setting that as the text of the element (and so you'll see the HTML markup on the page).
If you really want to do something with the actual word "text", you probably meant to use html rather than text in your first function call:
$('div').each(function(){
$(this).html($(this).html().replace(/text/, '<span style="color: none">$1<\/span>'));
// ^-- here
}
But if you're trying to wrap a span around the text of the div, you can use wrap to do that:
$('div').wrap('<span style="color: none"/>');
Like this: http://jsbin.com/ucopo3 (in that example, I've used "color: blue" rather than "color: none", but you get the idea).

$(function(){
$('div:contains("text")').each(function() {
$(this).html($(this).html().replace(/(text)/g, '<span style="color:red;">\$1</span>'));
});
});
I've updated your fiddle: http://jsfiddle.net/nMzTw/15/

The general practice of interacting with the DOM as strings of HTML using innerHTML has many serious drawbacks:
Event handlers are removed or replaced
Opens the possibility of script inject attacks
Doesn't work in XHTML
It also encourages lazy thinking. In this particular instance, you're matching against the string "text" within the HTML with the assumption that any occurrence of the string must be within a text node. This is patently not a valid assumption: the string could appear in a title or alt attribute, for example.
Use DOM methods instead. This will get round all the problems. The following will use only DOM methods to surround every match for regex in every text node that is a descendant of a <div> element:
$(function() {
var regex = /text/;
function getTextNodes(node) {
if (node.nodeType == 3) {
return [node];
} else {
var textNodes = [];
for (var n = node.firstChild; n; n = n.nextSibling) {
textNodes = textNodes.concat(getTextNodes(n));
}
return textNodes;
}
}
$('div').each(function() {
$.each(getTextNodes(this), function() {
var textNode = this, parent = this.parentNode;
var result, span, matchedTextNode, matchLength;
while ( textNode && (result = regex.exec(textNode.data)) ) {
matchedTextNode = textNode.splitText(result.index);
matchLength = result[0].length;
textNode = (matchedTextNode.length > matchLength) ?
matchedTextNode.splitText(matchLength) : null;
span = document.createElement("span");
span.style.color = "red";
span.appendChild(matchedTextNode);
parent.insertBefore(span, textNode);
}
});
});
});