¿Cómo encontrar texto en la página en ElectronJS?

Posted on by Rudeus Greyrat

ElectronJS es un marco de código abierto que se utiliza para crear aplicaciones de escritorio nativas multiplataforma utilizando tecnologías web como HTML, CSS y JavaScript que pueden ejecutarse en los sistemas operativos Windows, macOS y Linux. Combina el motor Chromium y NodeJS en un solo tiempo de ejecución. En ciertas aplicaciones de escritorio, a los desarrolladores les gustaría proporcionar una función en la que el usuario pueda encontrar una selección de texto personalizada en el contenido de la página web. Al igual que la funcionalidad de búsqueda activada por Ctrl+F en los navegadores Chromium. Electron proporciona una forma en la que podemos encontrar con éxito un texto personalizado en el contenido de la página utilizando los métodos y eventos deobjeto BrowserWindow incorporado y el contenido web.propiedad. Este tutorial demostrará cómo encontrar texto en el contenido de la página en Electron. Suponemos que está familiarizado con los requisitos previos que se describen en el enlace mencionado anteriormente. Para que Electron funcione, node y npm deben estar preinstalados en el sistema.

  • Estructura del proyecto: Estructura del proyecto

Ejemplo: Comenzaremos construyendo la aplicación electrónica básica siguiendo los pasos dados.

  • Paso 1: navegue a un directorio vacío para configurar el proyecto y ejecute el siguiente comando,
npm init
  • Para generar el archivo package.json . Instale Electron usando npm si no está instalado.
npm install electron --save
  • Este comando también creará el archivo package-lock.json e instalará las dependencias requeridas de node_modules . Una vez que Electron se haya instalado correctamente, abra el archivo package.json y realice los cambios necesarios con la clave de secuencias de comandos . paquete.json:
{
  "name": "electron-find",
  "version": "1.0.0",
  "description": "Find Text in Electron",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [
    "electron"
  ],
  "author": "Radhesh Khanna",
  "license": "ISC",
  "dependencies": {
    "electron": "^8.3.0"
  }
}
  • Paso 2: Cree un archivo main.js de acuerdo con la estructura del proyecto. Este archivo es el Proceso Principal y actúa como un punto de entrada a la aplicación. Copie el código Boilerplate para el archivo main.js como se indica en el siguiente enlace . Hemos modificado el código para adaptarlo a las necesidades de nuestro proyecto. principal.js: 

javascript

const { app, BrowserWindow } = require('electron')
 
function createWindow () {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })
 
  // Load the index.html of the app.
  win.loadFile('src/index.html')
 
  // Open the DevTools.
  win.webContents.openDevTools()
}
 
// This method will be called when Electron has
// finished initialization and is ready to create
// browser windows. Some APIs can only be used
// after this event occurs. This method is
// equivalent to 'app.on('ready', function())'
app.whenReady().then(createWindow)
 
// Quit when all windows are closed.
app.on('window-all-closed', () => {
 
  // On macOS it is common for applications and
  // their menu bar to stay active until the user
  // quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
 
app.on('activate', () => {
    // On macOS it's common to re-create a window in the
    // app when the dock icon is clicked and there are no
    // other windows open.
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})
 
// In this file, you can include the rest of your
// app's specific main process code. You can also
// put them in separate files and require them here.
  • Paso 3: Cree el archivo index.html y el archivo index.js dentro del directorio src . También copiaremos el código repetitivo para el archivo index.html del enlace mencionado anteriormente. Hemos modificado el código para adaptarlo a las necesidades de nuestro proyecto. índice.html: 

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <!-- https://electronjs.org/docs/tutorial
                           /security#csp-meta-tag -->
    <meta http-equiv="Content-Security-Policy"
          content="script-src 'self' 'unsafe-inline';" />
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node
    <script>
        document.write(process.versions.node)
    </script>, Chrome
    <script>
        document.write(process.versions.chrome)
    </script>, and Electron
    <script>
        document.write(process.versions.electron)
    </script>.
 
    <!-- Adding Individual Renderer Process JS File -->
    <script src="index.js"></script>
  </body>
</html>
  • Salida: en este punto, nuestra aplicación electrónica básica está configurada. Para iniciar la aplicación Electron, ejecute el comando:
npm start
  • GUI Output

Buscar texto en la página en Electron: la instancia de BrowserWindow y la propiedad webContents son parte del proceso principal . Para importar y usar BrowserWindow en el proceso Renderer , usaremos el módulo remoto Electron . El método webContents.findInPage(text, options) inicia una solicitud para encontrar todas las coincidencias positivas para el texto en el contenido de la página BrowserWindow . Este método devuelve un número entero que representa el ID de solicitud utilizado para la solicitud. Los resultados de la solicitud se pueden obtener suscribiéndose a la página encontradaEvento de instancia que se explica en detalle a continuación. Este método resalta automáticamente el texto en el contenido para cada coincidencia positiva. Si hay varias coincidencias, varios segmentos del contenido se resaltarán con el texto coincidente. En nuestro código, esto se activa con el botón Buscar en texto . Toma los siguientes parámetros.

  • texto: String Este valor no puede estar vacío. Este valor representa el contenido que se buscará en la instancia de BrowserWindow .
  • opciones: Objeto (Opcional) Toma los siguientes parámetros,
    • adelante: booleano (opcional) Este valor representa si se realiza la operación de búsqueda hacia adelante desde el inicio del contenido de la página o hacia atrás desde el final del contenido de la página. El valor predeterminado es verdadero . Esta propiedad afecta el objeto de resultado obtenido del evento de instancia encontrado en la página .
    • findNext: booleano (opcional) Este valor representa si la operación de búsqueda es una operación de primera solicitud o una operación de seguimiento . El valor predeterminado es falso . En caso de que este valor se establezca en true , la operación de búsqueda funcionará como se esperaba, pero no podremos recuperar y mostrar el objeto de resultado obtenido del evento de instancia encontrado en la página .
    • matchCase: booleano (opcional) Este valor representa si la operación de búsqueda debe distinguir entre mayúsculas y minúsculas o no. El valor predeterminado es falso .
    • wordStart: booleano (opcional) Este valor representa si la operación de búsqueda debe buscar solo al principio de las palabras. El valor predeterminado es falso . Esta propiedad se usa en combinación con la propiedad medialCapitalAsWordStart .
    • medialCapitalAsWordStart: booleano (opcional) Cuando se combina con la propiedad wordStart , permite que la operación de búsqueda acepte una coincidencia en el medio de la palabra si la coincidencia comienza con una letra mayúscula seguida de una letra minúscula o no es una letra. Acepta varias otras combinaciones de coincidencias dentro de la palabra, incluidos los caracteres alfanuméricos. El valor predeterminado es falso .

El método de instancia webContents.stopFindInPage(action) detiene cualquier solicitud activa de webContents.findInPage() para buscar texto en el contenido de la página con el parámetro de acción proporcionado. En nuestro código, esto se activa con el botón Borrar selección . Toma los siguientes valores,

  • action: String Este parámetro especifica la acción que se realizará al finalizar una solicitud activa iniciada por el método webContents.findInPage() . Puede asumir cualquiera de los siguientes valores.
    • clearSelection: borra los resultados de selección/búsqueda obtenidos del evento de instancia encontrado en la página . Elimina todos los resultados de búsqueda resaltados del contenido de la página.
    • keepSelection: Traduce los resultados de búsqueda/selección resaltados obtenidos del Evento de instancia encontrado en la página en una selección normal.
    • activarSelección: Habilita enfocar y hacer clic para el Node de selección. Selecciona la primera coincidencia positiva y la resalta.

Para obtener la instancia actual de BrowserWindow en el proceso Renderer , podemos usar algunos de los métodos estáticos proporcionados por el objeto BrowserWindow .

  • BrowserWindow.getAllWindows(): este método devuelve una array de instancias de BrowserWindow activas/abiertas . En esta aplicación, solo tenemos una instancia de BrowserWindow activa y se puede hacer referencia directamente desde la array como se muestra en el código.
  • BrowserWindow.getFocusedWindow(): este método devuelve la instancia de BrowserWindow que está enfocada en la aplicación. Si no se encuentra ninguna instancia de BrowserWindow actual , devuelve nulo . En esta aplicación, solo tenemos una instancia de BrowserWindow activa y se puede hacer referencia directamente mediante este método, como se muestra en el código.

El evento de instancia encontrado en la página pertenece a la propiedad webContents . Se emite cuando el método webContents.findInPage() ha completado sus operaciones y los resultados están disponibles. Devuelve los siguientes parámetros.

  • evento: El objeto Evento Global.
  • resultado: Objeto Devuelve los siguientes parámetros,
    • requestId: Integer El ID de número entero devuelto por el método webContents.findInPage() que se utiliza para representar la solicitud activa.
    • activeMatchOrdinal: Integer Según la documentación oficial de Electron, representa el índice del primer Active Match. Este valor depende de la propiedad de reenvío establecida en las opciones Objeto. En el caso de una sola coincidencia positiva, no hay impacto; sin embargo, en el caso de múltiples coincidencias, este valor cambia dependiendo de la búsqueda hacia adelante o hacia atrás .
    • coincidencias: Entero El número de coincidencias positivas para el texto en el contenido de la página.
    • SelectionArea: Coordenadas rectangulares de la primera región de coincidencia. Este valor depende de la propiedad de reenvío establecida en las opciones Objeto. Devuelve un Objeto que contiene los siguientes parámetros,
      • x: Entero La coordenada x. Es el desplazamiento izquierdo del texto coincidente desde el límite de la página.
      • y: Entero La coordenada y. Es el desplazamiento superior del texto coincidente desde el límite de la página.
      • ancho: Entero El ancho de la región coincidente.
      • altura: Entero La altura de la región coincidente.
    • finalUpdate: Boolean Devuelve verdadero cuando el evento de instancia encontrado en la página se ha emitido con éxito y se ha encontrado la última coincidencia positiva en el contenido. Podemos activar con éxito el método de instancia webContents.stopFindInPage() cuando este valor se devuelve como verdadero .
  • index.html: agregue el siguiente fragmento en ese archivo. 

html

<h3>Find Text in Page</h3>
    <div>Lorem ipsum dolor sit amet consectetur
         adipisicing elit. GeeksForGeeks. Dolores
         numquam quae ipsum, voluptas nisi dicta
         dolorem eaque omnis nulla fuga.Provident
         dolorem amet quas perferendis culpa,
         vitae eius dolores facere? GeeksForGeeks.
    </div>
    <br><br>
    <input id="enter" type="text">
    <button id="find">Find in Text</button>
    <button id="clear">Clear Selection</button>
  • index.js: agregue el siguiente fragmento en ese archivo. 

javascript

const electron = require('electron')
// Importing BrowserWindow from Main Process
const BrowserWindow = electron.remote.BrowserWindow;
 
var find = document.getElementById('find');
var clear = document.getElementById('clear');
let win = BrowserWindow.getFocusedWindow();
// let win = BrowserWindow.getAllWindows()[0];
 
var options = {
    forward: true,
    findNext: false,
    matchCase: false,
    wordStart: false,
    medialCapitalAsWordStart: false
}
 
find.addEventListener('click', () => {
    var text = document.getElementById('enter').value;
    console.log(text);
    if (text) {
        const requestId = win.webContents.findInPage(text, options);
        console.log(requestId);
    } else {
        console.log('Enter Text to find');
    }
 
    win.webContents.on('found-in-page', (event, result) => {
        console.log(result.requestId);
        console.log(result.activeMatchOrdinal);
        console.log(result.matches);
        console.log(result.selectionArea);
    });
});
 
clear.addEventListener('click', () => {
    win.webContents.stopFindInPage('clearSelection');
});

Producción:

Publicación traducida automáticamente

Artículo escrito por radheshkhanna y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *