Electron findInPage highlight


#1

i’m trying to change the highlight color on the matches when found in page, not much luck tho.
any help will be welcome.


#2

Are you asking about Atom, the text editor, or Electron, the application framework?


#3

The title says Electron but yeah… the framework


#4

Can you show the code that you’re using to display the findInPage highlight?


#5

when you use the webContents.findInPage method the highlight happens by default, the results/matches for what you are trying to find are highlighted, and me i want to change that default


#6

I’m not really familiar with how the function works, but have you tried setting ::selection in CSS?


#7

thanks @caffiend but i’ve already tried it, the find method does a selection but using that pseudo does not work for some reason…


#8

Ok, so a would probably just use js to put the results in spans & then css to style these. Like this:

CSS:
`.found {

background-color: yellow;

}`

JS:
var searchfor = "test" ; document.body.innerHTML = document.body.innerHTML.replace(new RegExp(searchfor,'g'),'<span class="found">' + searchfor + ',</span>') ;

This should highlight any occurences of the variable yellow. You can change the hightlight color in the css & the string to search for by changing the variable “searchfor”.
To get best results, I would personaly put it in a function with an argument.
Here is an example:

<html>
<head>
<title>Hmm</title>
<style>

.found {
    
    background-color: yellow;
    
}

</style>
</head>
<body>

<h1>Testy test</h1>
<p>Some text for testing.</p>
<p>This is a great test!!!</p>
<button type="button" onclick="find(' t' + 'est') ;">Find</button>
<button type="button" onclick="unhighlight(' 't + 'est') ;">Reset</button>

<script type="text/javascript">

function find(searchfor) {
    
document.body.innerHTML = document.body.innerHTML.replace(new RegExp(searchfor,'g'),'<span class="found">' +     searchfor + '</span>') ;
    
}

function unhighlight(searchfor) {
    
    document.body.innerHTML = document.body.innerHTML.replace(new RegExp('<span class="found">' + searchfor +     '</span>','g'),searchfor) ;
    
}

</script>
</body>
</html>

In the buttons, I used ’ t’ + ‘est’ as the argument rather than just ‘test’ because otherwise it would replace that as well.
I hope this helps,
Jacob


#9

i guess that could do the trick, i will try it if i don’t find the root of that highlight… anyways, thanks @JOT85