Как найти текст на странице в ElectronJS?

Опубликовано: 1 Августа, 2021

ElectronJS - это платформа с открытым исходным кодом, используемая для создания кроссплатформенных нативных настольных приложений с использованием веб-технологий, таких как HTML, CSS и JavaScript, которые могут работать в операционных системах Windows, macOS и Linux. Он объединяет движок Chromium и NodeJS в единую среду выполнения.

В некоторых настольных приложениях разработчики хотели бы предоставить функцию, с помощью которой пользователь может найти настраиваемый текстовый выбор в содержимом веб-страницы. Точно так же, как функция поиска, запускаемая Ctrl + F в браузерах Chromium. Электронно обеспечивает способ , с помощью которого мы можем успешно найти свой текст в содержании страницы , используя методы Instance и событие встроенного объекта BrowserWindow и webContents собственности. В этом руководстве будет показано, как найти текст в содержимом страницы в Electron.

Мы предполагаем, что вы знакомы с предварительными условиями, описанными в вышеупомянутой ссылке. Для работы Electron в системе должны быть предварительно установлены node и npm.

Структура проекта:

Пример: мы начнем с создания основного электронного приложения, выполнив указанные шаги.

Шаг 1. Перейдите в пустой каталог, чтобы настроить проект, и выполните следующую команду:
```
 npm init
```
Чтобы сгенерировать файл package.json. Установите Electron с помощью npm, если он не установлен.
```
 npm установить электрон - сохранить
```
Эта команда также создаст файл package-lock.json и установит необходимые зависимости node_modules. После успешной установки Electron откройте файл package.json и внесите необходимые изменения в ключ скриптов.
package.json:
```
{
  "имя": "электрон-найти",
  "версия": "1.0.0",
  "description": "Найти текст в электронном",
  "main": "main.js",
  "scripts": {
    "старт": "электрон".
  },
  "ключевые слова": [
    "электрон"
  ],
  «автор»: «Радхеш Ханна»,
  "лицензия": "ISC",
  "dependencies": {
    "электрон": "^ 8.3.0"
  }
}
```

Шаг 2: Создайте файл main.js в соответствии со структурой проекта. Этот файл является основным процессом и действует как точка входа в приложение. Скопируйте код Boilerplate для файла main.js, как указано в следующей ссылке. Мы изменили код в соответствии с потребностями нашего проекта.

main.js:

 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.

Шаг 3. Создайте файлы index.html и index.js в каталоге src. Мы также скопируем шаблонный код для файла index.html из вышеупомянутой ссылки. Мы изменили код в соответствии с потребностями нашего проекта.

index.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 > 

Вывод: На этом этапе настроено наше основное электронное приложение. Чтобы запустить приложение Electron, выполните команду:
```
 npm start 
```

Найти текст на странице в Electron: The BrowserWindow Instance и webContents собственности являются частью основного процесса. Чтобы импортировать и использовать BrowserWindow в процессе рендеринга, мы будем использовать удаленный модуль Electron.

Метод webContents.findInPage (text, options) запускает запрос, чтобы найти все положительные совпадения для текста в содержимом страницы BrowserWindow. Этот метод возвращает целое число, которое представляет идентификатор запроса, используемый для запроса. Результаты запроса можно получить, подписавшись на событие экземпляра, найденное на странице, которое подробно поясняется ниже. Этот метод автоматически выделяет текст в содержимом при каждом положительном совпадении. Если есть несколько совпадений, несколько сегментов содержимого будут выделены соответствующим текстом. В нашем коде это запускается кнопкой «Найти в тексте». Он принимает следующие параметры.

текст: String Это значение не может быть пустым. Это значение представляет контент, который нужно искать в экземпляре BrowserWindow.
options: Object (Необязательно) Принимает следующие параметры,
- forward: Boolean (Необязательно) Это значение указывает, следует ли выполнять операцию поиска вперед от начала содержимого страницы или назад от конца содержимого страницы. Значение по умолчанию - истина . Это свойство влияет на объект результата, полученный из события экземпляра, найденного на странице.
- findNext: Boolean (Необязательно) Это значение указывает, является ли операция поиска операцией первого запроса или последующей операцией. Значение по умолчанию - false . В случае, если для этого значения установлено значение true , операция поиска будет работать должным образом, но мы не сможем извлечь и отобразить объект результата, полученный из события экземпляра найденного на странице.
- matchCase: Boolean (Необязательно) Это значение указывает, должна ли операция поиска быть чувствительной к регистру или нет. Значение по умолчанию - false .
- wordStart: Boolean (Необязательно) Это значение указывает, должна ли операция поиска смотреть только на начало слова. Значение по умолчанию - false . Это свойство используется в сочетании со свойством medialCapitalAsWordStart.
- medialCapitalAsWordStart: Boolean (Необязательно) В сочетании со свойством wordStart он позволяет операции поиска принимать совпадение в середине слова, если совпадение начинается с заглавной буквы, за которой следует строчная буква, или небуквенного символа. Он принимает несколько других комбинаций соответствия внутри слова, включая буквенно-цифровые символы. Значение по умолчанию - false .

Метод экземпляра webContents.stopFindInPage (action) останавливает любой активный запрос webContents.findInPage () на поиск текста в содержимом страницы с предоставленным параметром действия. В нашем коде это запускается кнопкой «Очистить выделение». Принимает следующие значения:

action: String Этот параметр указывает действие, выполняемое при завершении активного запроса, запущенного методом webContents.findInPage () . Он может принимать любое из следующих значений.
- clearSelection: очищает результаты выбора / поиска, полученные из события экземпляра «найдено на странице». Он удаляет все выделенные результаты поиска из содержимого страницы.
- keepSelection: переводит выделенные результаты выбора / поиска, полученные из события экземпляра «найдено на странице», в нормальный выбор.
- activateSelection: включает фокус и щелчок для узла выбора. Он выбирает первое положительное совпадение и выделяет его.

Чтобы получить текущий экземпляр BrowserWindow в процессе рендеринга, мы можем использовать некоторые статические методы, предоставляемые объектом BrowserWindow.

BrowserWindow.getAllWindows (): этот метод возвращает массив активных / открытых экземпляров BrowserWindow. В этом приложении у нас есть только один активный экземпляр BrowserWindow, и на него можно напрямую ссылаться из массива, как показано в коде.
BrowserWindow.getFocusedWindow (): этот метод возвращает экземпляр BrowserWindow, который сфокусирован в приложении. Если текущий экземпляр BrowserWindow не найден, возвращается значение null . В этом приложении у нас есть только один активный экземпляр BrowserWindow, и на него можно напрямую ссылаться с помощью этого метода, как показано в коде.

Событие экземпляра, найденное на странице, принадлежит свойству webContents . Он генерируется, когда метод webContents.findInPage () завершил свои операции и результаты доступны. Он возвращает следующие параметры.

event: объект Global Event.
результат: Объект Он возвращает следующие параметры,
- requestId: Integer Целочисленный идентификатор, возвращаемый методом webContents.findInPage (), который используется для представления активного запроса.
- activeMatchOrdinal: Integer Согласно официальной документации Electron, он представляет собой индекс первого активного совпадения. Это значение зависит от свойства forward, установленного в параметрах Object. В случае единственного положительного совпадения это не влияет, однако в случае множественных совпадений это значение изменяется в зависимости от прямого или обратного поиска.
- match: Integer Количество положительных совпадений для текста в содержимом страницы.
- selectionArea: Прямоугольные координаты первой совпадающей области. Это значение зависит от свойства forward, установленного в параметрах Object. Он возвращает объект, содержащий следующие параметры,
  - x: Integer Координата x. Это левое смещение совпадающего текста от границы страницы.
  - y: Integer Координата y. Это верхнее смещение совпадающего текста от границы страницы.
  - width: Integer Ширина соответствующей области.
  - height: Integer Высота соответствующего региона.
- finalUpdate: Boolean Возвращает истину, когда событие экземпляра найденного на странице было успешно сгенерировано и было найдено последнее положительное совпадение в содержимом. Мы можем успешно запустить метод экземпляра webContents.stopFindInPage (), когда это значение будет возвращено как истинное .

index.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: добавьте в этот файл следующий фрагмент.

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

Выход:

Node.js JavaScript HTML CSS

Как найти текст на странице в ElectronJS?

РЕКОМЕНДУЕМЫЕ СТАТЬИ