javascript innerhtml issue - javascript

I'm trying to get the innerHTML value of a node. The value is D&O. When I try to get this value using innerHTML I'm getting D &amp[semicolon] O. Is there any option to get the exact value rather than encoded value using Javascript? Please help me.
Forum prevents me from entering semicolon after &amp

You can use
return ("innerText" in node) ? node.innerText : node.textContent;
innerHTML will returns the equivalent HTML that would provide the text that you see.

element.firstChild.data;
Get the data in the text node contained in the element. If you want the text and not HTML that represents it, don't use innerHTML.

Related

How to search/replace text being copied before sending to clipboard using Javascript/jQuery?

I managed to add text to what's being copied using the code in this answer(the second option). However, when I change the string concatenation and add a call to replace, I get an error "replace is not a function".
copytext = window.getSelection().replace(/some pattern/, 'replace value'); // Fails
The "selection" object seems to be very complex and I can't even find the text inside it. I could call toString on it but that's not an option because I'm copying HTML from a contenteditable div and I need to preserve the formatting.
I'm trying to do this because I have relative links in the div's content and they're being converted to absolute links in the copied text for some reason. This only happens when accessing my demo from rawgit. Locally, it works normally.
Any ideas on how I could accomplish this?
UPDATE
Here's a jsfiddle with my current setup: https://jsfiddle.net/8kx8v8pb/
You need to cast it to a string (getSelection() returns a Selection object).
So either append a "" or cast it to a string with .toString() before executing the .replace()
so in your case, the code should be like this:
copytext = (window.getSelection() + "").replace(/some pattern/, 'replace value');
or
copytext = (window.getSelection().toString()).replace(/some pattern/, 'replace value');
Source: https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection
selection is a object so if you want to run the replace function on its text then use following.
window.getSelection().anchorNode.data.replace(/some pattern/, 'replace value');
I hope this will help

Find the value of inner HTML of a div that has more than one element in it

I am looking for a way to extract the value of "0.00" from this div:
I tried using this method, but it gives me an output of "NaN"
var c = +(document.getElementById("header-balance").innerHTML)
Use .textContent, it represents the text content of a node
var c = +(document.getElementById("header-balance").textContent)
Note from MDN: innerHTML returns the HTML as its name indicates. Quite often, in order to retrieve or write text within an element, people use innerHTML. textContent should be used instead. Because the text is not parsed as HTML, it's likely to have better performance.

Cheerio `text()` empty string for span tag

I've loaded to Cheerio a product from belk.com.
I can get to the price element using the selector [class="price"], but when I try to get its text using text(), I get an empty string.
If I do $('class="price"').contents() I can see a child with the text, but it seems like the wrong way to go. Is there a generic method to getting the element text?
Thanks!
That HTML has both p and span tags with class price, so you'll need to be more specific. This works for me $('p.price span.price').text()
Apparently, this is expected node REPL behavior.
The values tested negative for null and in debugger mode I could see the scraped value from Cheerio. Because it contained \r characters, printing it to console looked as if it's an empty string.

Trying to get just the text from a node with filter(), but is returning an object?

I am simply trying to extract the text without any of the elements from a DOM node with
var textIWant = $('.classname').contents().filter(function(){
return this.nodeType === 3;
})[1];
This returns to me what looks like a string in the console, something untrimmed like..
" text I want "
so when I go to trim the text, with something like
$.trim(textIWant)
I get
"[object Text]"
also as you would expect,
typeof textIWant
returns "object"
Why is this string looking object not a string, and how can I get the string I need? I cannot use methods such as String() or toString() it will just convert it to the same "[object Text]" that I put above.
**EDIT
I also want to add that I am working with a proxy server, so I do not have direct access the the original HTML written, otherwise, the common sense solution would be to wrap the text in an HTML tag and query for it using jQuery's .text(). My question comes from an edge case scenario not unfamiliarity with jQuery :).
** Answer
Something like this seemed to do the trick
$.trim($($('.classname').contents().filter(function(){
return this.nodeType === 3;
})[1]).text())
thank you.
You have a TextNode object so need to read it thusly:
var text = $(textIWant).text();
Or natively
var text = textIWant.nodeValue;
I see no reason in your question for why you need to deal with text nodes directly yourself at all. jQuery will fetch text for you.
If you only have a single object that matches .classname then the simpler way to get the text from that element is with:
var textIWant = $.trim($(".classname").text());
This will collect the text from all textnodes that are within the .classname element. There is no need for you to filter through them yourself.
If you may have more than one element that matches .classname and you only want the text from the first one, then you can use this:
var textIWant = $.trim($(".classname").eq(0).text());
In the future, if you do have a textNode DOM element and you wish to retrieve the text from it, you can use node.nodeValue to get the text from a textNode.
As to your other questions:
Why is this string looking object not a string, and how can I get the
string I need?
You were retrieving the text node DOM object, not the text from the node. You can use node.nodeValue to get the actual text from the text node and then you will have a string that you can operate on as a string.
I cannot use methods such as String() or toString() it will just
convert it to the same "[object Text]" that I put above.
This is because you had a text node, not a string. You just have to get the text out of the node so you can then use it as a string.
Use .toString() in your code before assigning that to "textIWant" variable or you can convert it to string by this function:
http://www.w3schools.com/jsref/jsref_string.asp
Note: If your object is a DOM element you may use "text" function from jquery:
http://api.jquery.com/text/
textIWant is a Text node. Therefore when you throw it into the $.trim it will try to run it on an object.
You would want to ask for the textContent of the TextNode
like so.
$.trim(textIWant.textContent); //Does not work in IE8 or below
or like Alex K. suggested use jQuery to get the text from the node using .text()
$.trim($(textIWant).text);
http://jsbin.com/welidanihe/edit?html,js,console

adding property to array element in javascript

I'm trying to learn and understand javascript.
what is wrong with the following code?
var d=[];
d[0]=document.createElement('div');
d[0].title=document.createElement('div');
d[0].appendChild(d[0].title);
I get this error:
TypeError: Argument 1 of Node.appendChild is not an object.
Can you suggest a solution?
This line d[0].appendChild(d[0].title); is expecting an element to be appended to the div. Your simply appending a text node. Create another div (or whatever element you want) and append that.
The problem is that the name title is reserved. Try a different name.
.title is an attribute of the element, which is a string. When you try to append something to that attribute it is expecting a string.

Categories