Replace letters using jQuery

Question

I am making a bookmarklet that would change all letters, like "R", with other letters, like "W", or possibly replace whole words. I have tried using the following code, but it messes up the website, and shows the elements in the element.

javascript: $("body").text($("body").text().replace("r", "w"));

Would there be a solution for this?

For those of you who are wondering what I would use this for, I am trying to make a code that would turn this:

Hello, my name is Jonathan Grasswell, and I would like to propose a new idea for a tractor.

Into this:

Hewwo, my nyame is Jonnyathyan Gwyassweww, aynd I wouwd wike to pwopose a nyew ideya fow ay twactow.

Basically, a "OWOfier". Also, would it be possible to insert a random emoticon 20% of the time after a period?

Does this answer your question? [Change matching words in a webpage's text to buttons](https://stackoverflow.com/questions/40572679/change-matching-words-in-a-webpages-text-to-buttons) — Makyen, Oct 30 '19 at 19:47

score 0 · Answer 1 · answered Oct 29 '19 at 01:19

method text() only return text content of body.

try this function, run this function under this page's console by press F12, this function while replace "Jonathan" with "ABCDEFGHIJKLMN".

function replaceTextOfElement(element) {
  $(element).contents()
    .filter((_, child) => child.tagName !== 'SCRIPT' && child.tagName !== 'STYLE' && child.tagName !== 'IFRAME')
    .each((_, child) => {
      if(child.nodeType === Node.TEXT_NODE) {
        child.data = child.data.replace('Jonathan', 'ABCDEFGHIJKLMN');
      } else {
        replaceTextOfElement(child);
      }
    });
}
replaceTextOfElement($('body'));

Roko C. Buljan · Accepted Answer · 2019-11-04T01:41:05.407

0

BODY if full of HTML stuff. Your issue is right here $("body").text($ , since in the .text( you're saying : "Make body be this text: " losing the entire markup.
You should instead iterate over every NodeType that is a 3 (Node.TEXT_NODE) or rather by using the TreeWalker API

const body = document.body; // Or whatever more specific element you desire
const repl = { // Your replacements:
  "l"   : "w",
  "L"   : "W",
  "r"   : "w",
  "R"   : "W",
  "\\." : ". :)" // Remember, escape RegExp special characters to treat them as literals
};

const treeWalker = document.createTreeWalker(body, NodeFilter.SHOW_TEXT);

while (treeWalker.nextNode()) {
  const Node = treeWalker.currentNode; // PS: Node.nodeType is always 3 
  Object.keys(repl).forEach(key => {
    Node.nodeValue = Node.nodeValue.replace(new RegExp(key, "g"), repl[key]);
  });
}

.hello, .ll {color: BURLYWOOD;} /* "l"s of "class" and "hello" will stay intact */

<h1 class="hello">Hello,</h1>
<p>
  my name is <b class="ll">Long Island</b>, 
  and I would like to propose a new idea. For a clock. LOL
</p>

edited Nov 04 '19 at 01:41

answered Oct 29 '19 at 01:53

Roko C. Buljan

196,159
39
305
313

1

What would I do if I wanted to compact this into a bookmarklet? – Oct 30 '19 at 02:40
You need to exclude the text nodes which are children of ` – Makyen Oct 30 '19 at 19:47
1

what would the code for that be? I am kinda confuzed on how to use the code. – Oct 31 '19 at 01:58
1

when I try to run it as a bookmarklet, nothing happens. when I try to compact it with this: http://bookmarklets.org/maker/ It tells me that there are some errors. help? – Oct 31 '19 at 02:09
@Questionable Simply replace `key =>` with `function(key)`. Enjoy – Roko C. Buljan Oct 31 '19 at 09:26
@Roko I have decided to make a chrome extension for this, because I have the time to, and I would like to know how I would allow people to edit the list of replacements. I will change it from a `const` to a `var`, but after messing around with an html file and a – Dec 06 '19 at 00:25

Replace letters using jQuery

2 Answers2