Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs
Community Proposals
Community Proposals
tag:snake search within a tag
answers:0 unanswered questions
user:xxxx search by author id
score:0.5 posts with 0.5+ score
"snake oil" exact phrase
votes:4 posts with 4+ votes
created:<1w created < 1 week ago
post_type:xxxx type of post
Search help
Notifications
Mark all as read See all your notifications »
Q&A

Welcome to Software Development on Codidact!

Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.

Comments on Delete all occurrences of a character in a webpage with vanilla JavaScript

Parent

Delete all occurrences of a character in a webpage with vanilla JavaScript

+5
−1

Primarily for learning, I would like to try to delete a specific character (letter or number or special character), wherever it is in a webpage, with vanilla JavaScript.

The webpage won't change at all; it will stay almost the same but just without that character.


It doesn't matter where that character would appear:

  • In the start of a line
  • In the end of a line
  • Inside a word
  • Outside a word
  • Between two field separators (whitespaces/tabulations, etc.)

Wherever it will appear, it will be deleted.


What would be a vanilla JavaScript "brute force" tool to do so and how would you prefer to do so if asked by a client?

If I am not mistaken "Tree walker" is a JavaScript concept which should be useful here.

History
Why does this post require moderator attention?
You might want to add some details to your flag.
Why should this post be closed?

2 comment threads

replace() on innerHTML (5 comments)
Some musings... (3 comments)
Post
+2
−3

Credit to user Zakk which exampled a solution here.

document.body.innerHTML = document.body.innerHTML.replace(/x/g, '*');

Which I've adjusted to my particular need (a particular scope inside the body scope) this way:

document.querySelector('.new_pages').innerHTML = document.querySelector('.new_pages').innerHTML.replace(/x/g, '');
History
Why does this post require moderator attention?
You might want to add some details to your flag.

2 comment threads

Dangerous (1 comment)
"The webpage won't change at all; it will stay almost the same but just without that character." (18 comments)
"The webpage won't change at all; it will stay almost the same but just without that character."
elgonzo‭ wrote almost 2 years ago · edited almost 2 years ago

This solution will not ensure that the "webpage won't change at all" and that "it will stay almost the same but just without that character" (your words), unless you strictly restrict it to not replace/remove characters that are part of HTML tag names, attribute names, attribute values, part of Javascript code or CSS stylesheet definitions inlined in the HTML text. Otherwise, it's a rather safe bet that doing so will change the web page in undesired ways.

The "x" you used in your answer for example is occuring as part of "text-" CSS properties or the "px" unit symbol used in CSS. The code snippet in your answer will destroy such CSS property names and pixel values in style attributes or CSS style sheet definitions inlined with the HTML text. It would also destroy HTML tags with an "x" in their names (like <textarea> / </textarea>, for example) present in the HTML text.

It's quite a destructive solution actually, if applied naively...

hkotsubo‭ wrote almost 2 years ago

As already pointed by elgonzo‭, your code might completely destroy the HTML - in your case, it probably "worked" by luck/coincidence, because you're being more restrict: you select only one specific element (the one that has the new_pages class), and I guess there were no tags or attributes with the letter x in this element's innerHTML. But just because it "worked", it doesn't mean it's the correct solution.

A much better approach is to restrict the replacement to be made only on text nodes: please refer to this answer, which I believe can be easily adapted to your case.

deleted user wrote almost 2 years ago

elgonzo‭ I didn't use it naively; I used it on a very specific element unique by CSS ID and there on a very specific text.

If you meant that it's harmful to use on an entire document than I would agree that it's a problematic approach which can destroy many passages of content.

deleted user wrote almost 2 years ago · edited almost 2 years ago

Furthermore elgonzo‭ I now think about deleting my answer.

For me, when applied in the specific way, it's a good code, short and very easy to understand.

I didn't manage to understand the code in the second answer, by Meriton, because lack of background knowledge in this specific topic of JavaScript treewalking which I grasp as very hard and confusing with quite non-trivial JavaScript keywords and commands (at least for myself) compared to the code in my answer.

You might want to suggest an edit in my answer to ensure that the code is used wisely even if an example you will give would be totally imaginary.

Here I give you the full right to edit my answer so it will never be grasped as naive.

hkotsubo‭ wrote almost 2 years ago

deleted user "it's harmful to use on an entire document" - Actually, it's potentially harmful to use in any element, if its innerHTML contains tags/attributes with the character you're replacing. Let's say you use it in a div, and that div contains a textarea element. Replacing the letter "x" will destroy the textarea.

The problem is not the element in which you do the replacement, but the way this replacement is done. Instead, the approach used in meriton's answer (or the treewalker code in the link I suggested) are safer because they change only the text nodes, leaving tags and attributes untouched.

elgonzo‭ wrote almost 2 years ago · edited almost 2 years ago

deleted user

I used it on a very specific element unique by CSS ID and there on a very specific text.

For me, when applied in the specific way, it's a good code, short and very easy to understand.

Good to hear, but...

You seem to miss the point of your own question :-)

Your question asks to delete "all occurrences of a character in a webpage", "wherever it is in a webpage" (and not just in some specific text in some specific and well-chosen element that only contains plain text without other HTML tags or some such). The answer you gave is not a good answer to your own question. But even if it happens to produce the desired results for your actual situation (which is not aligning that closely with your question, it seems to me), it's not generally a good advice/approach to do so (aside from the single and very limited scenario it works for; and which might -or might not- be your scenario) for the reasons explained here in this comment thread.

deleted user wrote almost 2 years ago

hkotsubo‭ I understand. Though, I am currently having hard time understanding treewalking commands in JavaScript.

Can the answer by Meriton somehow simplified?

deleted user wrote almost 2 years ago

elgonzo‭ I don't miss the point of my own question but I made a mistake in phrasing it !

I should've explained that I way to remove all occurrences of the character anywhere in the parsed and rendered document.

How about that? :))) And should I edit to explain now or just delete the answer?

elgonzo‭ wrote almost 2 years ago · edited almost 2 years ago

I don't miss the point of my own question but I made a mistake in phrasing it !

I know, i was being a facetious smartass... ;-P

In my personal and worthless opinion, both would be okay; either deleting, or adding an update to the question (but not change the existing question body in a substantial way, so as not to invalidate the already given other answer), and also updating your answer with a qualification that explains under which circumstances/restrictions/constraints the string.replace function can be used safely for this purpose...

Can the answer by Meriton somehow simplified?

As i see it, it is rather simple, just half a dozen lines of code. It's a simple text-book example of straightforward recursion. If it is recursion you are struggling to understand, i would suggest to seek a tutorial that teaches specifically about recursion. If that is not what makes Meriton's answer difficult to understand for you, what in their answer makes it difficult for you to understand?

Skipping 1 deleted comment.

deleted user wrote almost 2 years ago

elgonzo‭ I have detailed greatly in a reply for Meriton's answer.

Please review what I wrote there.

elgonzo‭ wrote almost 2 years ago · edited almost 2 years ago

I believe you need to spend time with a tutorial, course or text book covering the Javascript language fundamentals. Asking around for bits and pieces about a language and how do this or how do that is not really productive, imo, when you are lacking the knowledge of basic Javascript fundamentals. Because, if you are lacking the language fundamentals to understand a simple 6-line-worth of code, if you are flustered by functions and recursion, then code comments won't help you much. It's alright, everyone is or was a beginner once. But if you want to learn the language, and if you want to learn it (relatively) painlessly, you need more than a few code comments. You have to do the boring (and sometimes tedious) effort of learning the fundamentals of the language. A Q&A site is a very very poor replacement for learning materials such as tutorials, courses or text books, especially when it is about the very fundamentals. (all that is just my opinion of course; do as you will...)

elgonzo‭ wrote almost 2 years ago · edited almost 2 years ago

(Good) Tutorials, courses and text books are not only teaching you the fundamentals, but are doing so in a structured manner, with later sections/chapters/topics building on what has been thought in earlier sections/topics. Asking on Q&A as an attempt of learning a language instead of using tutorials/courses/text books is imo the worst thing you can do, learning-wise, as all you effectively do is an arbitrary, unstructured scattershot approach of asking a little bit of this, asking a little bit of that, and eventually you will have a hard time connecting all the dots correctly. It's not even a contest in how difficult it is to develop a working understanding of language fundamentals just based on some arbitrary questions and pieces of information given by answers in comparison to working through some tutorials/courses/text books.

Because, contrary to a Q&A site, (good) tutorials/courses/text books are chiefly designed and structured to teach.

deleted user wrote almost 2 years ago · edited almost 2 years ago

elgonzo‭

I believe you need to spend time with a tutorial, course or text book covering the Javascript language fundamentals.

I have done that already and often do it again when new things come up.

Asking around for bits and pieces about a language and how do this or how do that is not really productive, imo

I disagree

when you are lacking the knowledge of basic Javascript fundamentals. Because, if you are lacking the language fundamentals to understand a simple 6-line-worth of code, if you are flustered by functions and recursion,

I don't lack the knowledge of basic JavaScript fundamentals.

In my mind this 6-line worth of code isn't simple at all and contains uncommon code for an uncommon task.

deleted user wrote almost 2 years ago · edited almost 2 years ago

Non of my fundamental courses of JavaScript ever dealt with this particular task. So far I have enjoyed learning anything I've learnt. I most enjoy learning in Q&A fashion. In fact I have learned much of what I know form Q&A sites.

deleted user wrote almost 2 years ago

To sum it all up, from my personal experience, you are wrong; I have taken courses on JavaScript fundamentals and read two fundamental books about JavaScript. None of this ever came up. I connect "the dots" generally fine, believe it or not.

elgonzo‭ wrote almost 2 years ago · edited almost 2 years ago

To sum it all up, from my personal experience, you are wrong

I'll take your word for it. I still disagree and still don't think your approach to learning JS is productive, but i also understand that my advice is unwelcome. It is not my intention to get in your way. My apologies. I will not do it again. Whichever beliefs you hold are ultimately fine with me, and whether you take or toss my advice is entirely your prerogative that at the end of the day is of no consequence to me. (Pedantically and technically, my advice is not even directly about the question posed.) So, lets agree to disagree and move on... ¯\(ツ)

deleted user wrote almost 2 years ago

elgonzo‭ not productive? Asking an expert questions after knowing the fundamentals (what is a variable, what is a procedure, what is a parameter, what is an argument, what is a call, what is a data type, what is a timeout, what is an interval, what is a what is a loop, what is what is an iteration what is recursion etc.) and just having trouble understanding an above-elementals concept is really not productive?

Well, yes, we will nicely disagree.

Zakk‭ wrote almost 2 years ago

deleted user You wrote in a comment:

If you meant that it's harmful to use on an entire document than I would agree that it's a problematic approach which can destroy many passages of content.

What you asked for was straightforward. In fact, the question explicitly states Delete "all occurences". Even more, further down in the question text, you ask for how to

delete a specific character (letter or number or special character), wherever it is in a webpage

and

It doesn't matter where that character would appear

and

Wherever it will appear, it will be deleted.

I think that you should reformulate your question. Because as it is asked, it means litterally everything.