Difficulty with the "find and replace" function in javascript for a browser application

Question

Difficulty with the "find and replace" function in javascript for a browser application

Navigation

#1 by (5 votes)
#2 by (2 votes)

3

I'm trying to develop an extension for Chrome, and I'm still getting started, and right from the start I'm already stuck. I know very little of javascript but I try to do what I can by searching. This extension is inspired by FoxReplace from firefox , that is, an extension that searches for all user-designated entries on the page which is and replaces with any other text that the user places.

I found an extension for Chrome in github and used it as a reference, but because it is hyper simple (just get "The Cloud" and replace with "my butt" - yes, it's really rough), you can not follow much, besides the code written there I still do not I can interpret very well to be able to put what I intend.

What I've tried (from scratch):

I put:

var str = "Texto da substituição";
var res = str.replace(/Será substituído/gim,"Substituirá");

But it does not work the way I wanted it, because in addition to this, I only look for the term within "Substitution Text", instead of the whole document, it needs something to start the search for the terms, which I several sites, but all I found were codes to put directly in the HTML of the page, in the body tag, which I think, if I'm not wrong, would not have contact with the extension, because it is part of the page and not application.

The extension that I took uses walk(document.body) and then sets the walk(node) function to the "statement" switch (node.nodeType) , which from what I saw works the way expected, but it needs several fixes because it fails in many different situations.

So I would like someone to explain to me the operation of walk , switch and case s the way they were used, and / or tell me how to do that which I intend in a more appropriate for my intention. This extension I got, having edited with what I know, works fine, the problem is the bugs and some inexplicable things that happen with his main code, which I can only correct, perhaps, when I understand the content .

Reference Extension Source Code

javascript

asked by anonymous 10.04.2014 / 10:36

2 answers

2

To search the entire document you need body content.

var search = /(Texto\s+da\s+substituição|Outro)/gi;
var replace = 'Substituir por isto';

var body = document.getElementsByTagName('body')[0];
body_content = body.innerHTML.replace(search, replace);
body.innerHTML = body_content;

10.04.2014 / 11:44

Is it possible to take advantage of the same WPF view for Desktop and Web? Java design pattern for code reuse

score 5 · Accepted Answer

I'm assuming you're familiar with JavaScript syntax, if it knows how switch and case works. If you're wrong, I suggest starting with a JavaScript tutorial, or maybe asking a more specific question (type: "how does swith work in JavaScript?").

In the sample code posted, walk is a recursive function that "visits" an element, then visits all its sub-elements. So if your HTML is something like this:

<body>
    <div id="a">
        <span id="b"></span>
        <span id="c"></span>
    </div>
    <div id="d">
        <span id="e"></span>
    </div>
    <div id="f"></div>
</body>

It will visit in this order: body , div#a , span#b , span#c , div#d , span#e , div#f . This is what the first 3%% s do if the visited element is of type "element," "document" or "fragment of document", visit your children. This way, all the contents of the document will be visited, such as you either.

The other case is for dealing with text nodes. A text node is simply the textual content of an element. For example, the text nodes of the example below:

<span>Este <b>é</b> um texto <i>formatado</i>.</span>

are:

In case : "This", "a text", "."
In span : "is"
In b : "formatted"

Whenever a text node is visited it calls the i , which in turn takes the contents of that node (i.e. a string) and sets it to the handleText variable. It changes the v variable, and then assigns it back to the text node.

I hope this has helped you to understand how the example works, so that you can adapt it to do what you want. For example, to do the substitution you want, just do it in the variable v , instead of creating a new variable ( v ).

v = v.replace(/Será substituído/gim,"Substituirá")

Move "hardcoded" text to a variable, so it's easier to modify it:

var de = /Será substituído/gim;
var para = "Substituirá";

...

v = v.replace(de, para);

And finally find a way to assign values to these two variables. I have no experience with Chrome extensions and therefore I do not know if this is the best way, but one way would be to simply use str :

var de = new RegExp(prompt("Entre com o texto a procurar", "Será substituído"), "gim");
var para = prompt("Entre com o texto a substituir", "Substituirá");

...

(The second argument is a default value, which you can omit if you do not want one)

Update: Normally a prompt does not have its content browsed - especially if it is from a different domain - for security reasons. But in the case of a browser extension, maybe this is allowed in this case. Try explicitly treating the iframe case by modifying the first iframe as follows:

    next = child.nextSibling;
    if ( child.tagName === "iframe" )     // Se for um iframe...
        walk(child.contentDocument.body); // ...acessa o body do seu documento.
    else             // Senão...
        walk(child); // ...percorre normalmente.
    child = next;