Hi Guys,
Could you please help me to use document.body.textContent in console log on a website?
For example I want to change this format of 4.500,00 to 4,500.00 or 4500.00?
How is it possible in this way i.e on this site Mod edit: link removed
Thank you in advance for your help.
Best regards,
YoungZeeZee
You can use Intl to do number formatting for locals.
I have removed your link. I don’t think we can allow links to gambling sites.
Thank you for your message,
Sorry did not mean to advertise a lottery site.
Let’s simplify my question as i am not really experienced in javascript and do not want a very professional solution.
How can i manipulate a site in console with document.body.textContent
I need the following things:
1: remove every dots “.”
2: change commas ","to dots “.”
Hope my question is clearer now.
Thank you in advance.
YoungZeeZee
When dealing with currency using string replacement isn’t an ideal solution but that is an option.
'20,50 10,10 100,10'.replace(/\,/g, '.')
// '20.50 10.10 100.10'
'20.50 10.10 100.10'.replace(/\./g, '')
// '2050 1010 10010'
I don’t see how doing points one and two to the entire body content would be useful. But I guess I’m not sure what it is you are trying to achieve.
Thank you for you reply again.
I have those codes for my needs->
let numTD = document.getElementsByTagName('td').length;
for (let i = 0; i < numTD; i++) {
let current = document.getElementsByTagName('td')[i];
if (current.innerText.includes(".")) {
current.innerText = current.innerText.replaceAll(".", "");
}
}
let numTD2 = document.getElementsByTagName('td').length;
for (let i = 0; i < numTD2; i++) {
let current = document.getElementsByTagName('td')[i];
if (current.innerText.includes(",")) {
current.innerText = current.innerText.replaceAll(",", ".");
}
}
However those codes do not work with every sites as they target only "td"s, when i change it to body or div the whole sites collapsed.
When i was doing a course I bumped into document.body.textContent and started thinking to have a “joker” code(s) where i can change/delete specific characters, so it could be letter A or B.
I am not experienced in js and do not know if it is possible or not to target he whole body tag.
Thank you.
So HTML is a tree structure, each element (a node) can have other elements beneath it, so take this:
<body>
<div>
<header>
<h1>The main title</h1>
</header>
<article>
<header>
<h2>Some other title</h2>
</header>
<div>
<p>Some text</p>
</div>
</article>
</div>
</body>
To get at "The main title" AND "Some text" AND "Some other title" AND , you need to drill down and select each of those.
You can’t just replace the textContent on <body>, because <body> doesn’t have any text content. The text content is body > div > header > h1 > TEXT and body > div > article > header > h1 > TEXT and body > div > article > div > p > TEXT
So going through the entire document – that’s going to be slow because you need to go though every single element seeing if it has text.
But, just to provide a solution, and try to explain what it’s doing, here is one possible way to do that. I’ve tried to use as little and as basic stuff as possible, but you are trying to hit every single element on a page, so unfortunately you do need to do a bit of checking and know what you’re checking for.
A functional version is here:
That’s just a very quick demo: the code in the demo is slightly more complicated than the code posted here because I provided a way to reset, and had the text where changes happened highlight in red when it happens.
The code here should be enough for a basic usecase:
Anyway:
/**
* @param {string|RegExp} targetText -
* The text you're trying to target - can be a string, or a regex pattern
* @param {string} replacementText -
* The string you want to replace the target with.
* @param {HTMLElement} [root=HTMLBodyElement] -
* The element you want to target (by default the body)
*
* NOTE: the `root = document.querySelector("body") means
* "if there is no argument for `root` provided, use this
* default value instead"
*/
function htmlTextSwapper(targetText, replacementText, root = document.querySelector("body")) {
// Ensure the target is a regex:
let targetRegex = new RegExp(targetText);
// `NodeIterator` is an object provided by the browser that helps
// you to write code that walks over HTML nodes.
// The function used to create it takes a "root" HTML element
// and paramer called "whatToShow".
// In this case, for "whatToShow", `SHOW_TEXT` says "just
// show text nodes".
//
// see: https://developer.mozilla.org/en-US/docs/Web/API/Document/NodeIterator
let nodeWalker = document.createNodeIterator(
/* the element to start iteration from */
root,
/* ignore everything except text nodes */
NodeFilter.SHOW_TEXT,
/* further filter to only grab ones that will get replacements */
{
acceptNode(node) {
if (targetRegex.test(node.nodeValue)) {
return NodeFilter.FILTER_ACCEPT;
} else {
return NodeFilter.REJECT;
}
}
},
);
// I'm going to use a loop here, and this variable holds
// the current node in that loop.
let currentNode;
// I initialise by moving to the first node. While there *is* a node...
while ((currentNode = nodeWalker.nextNode())) {
// Create a replacement string for the text...
let replacement = currentNode.nodeValue.replace(targetText, replacementText);
// ....then set that as the node value:
currentNode.nodeValue = replacement
}
}
So without all the comments:
function htmlTextSwapper(targetText, replacementText, root = document.querySelector("body")) {
let targetRegex = new RegExp(targetText);
let nodeWalker = document.createNodeIterator(
root,
NodeFilter.SHOW_TEXT,
{
acceptNode(node) {
if (targetRegex.test(node.nodeValue)) {
return NodeFilter.FILTER_ACCEPT;
} else {
return NodeFilter.REJECT;
}
}
},
);
let currentNode;
while ((currentNode = nodeWalker.nextNode())) {
let replacement = currentNode.nodeValue.replace(targetText, replacementText);
currentNode.nodeValue = replacement
}
}
Note that this will work if you run it in the console. If you’re doing something for fun, may work, but it’s a bit fragile, and you’re going to want to adjust it/change it to exactly what you want.
Finally, if you want to change numbers to match a locality (eg how they are printed in a specific country [yours?] rather than in the UK/US), then Intl is absolutely what you need to use, as @lasjorg says.
Sorry for the late reply and thank you for your kind explanation.
As I mentioned do not have much knowledge of javascript thought it would be more simply.
Thank you again and merry christmas
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.