使用 jQuery 替换字母

Question

我正在制作一个小书签，它可以将所有字母（例如 "R"）更改为其他字母（例如 "W"），或者可能替换整个单词。我试过使用下面的代码，但它弄乱了网站，并显示了元素中的元素。

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

有解决办法吗？

对于那些想知道我会用这个做什么的人，我正在尝试制作一个代码来改变这个：

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

进入这个：

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

基本上，一个"OWOfier"。另外，是否可以在一段时间后 20% 的时间插入随机表情？

Answer 1

方法text()仅return正文内容。

试试这个功能，运行这个功能在这个页面的控制台下按F12，这个功能同时用"ABCDEFGHIJKLMN"替换"Jonathan"。

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'));

Answer 2

BODY 如果装满 HTML 东西。您的问题就在这里 $("body").text($ ，因为在 .text( 中您说的是："Make body be this text: " 丢失整个标记。
您应该迭代每个 3 (Node.TEXT_NODE) 的 NodeType，或者更确切地说，使用 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>

使用 jQuery 替换字母

Replace letters using jQuery

javascript

jquery

bookmarklet