長めの検索候補のフォントを小さくするUserScript

2段階で小さくする

比較図

code:script.js

// バイトで数えられるようにする

String.prototype.byte = function() {

return encodeURIComponent(this).replace(/%../g,'x').length

}

const form = document.querySelector('.form-group');

// バイト数の設定（min以下なら何もしない。min<バイト<=maxなら少し小さく。maxより長いと最小にする）

const min = 57;

const max = 72; // or 68

form.addEventListener('keyup', e => {

let items = form.querySelectorAll('ul li a')

items.forEach(item=>{

// 検索候補の文字数をバイト数で取得

let len = item.text.byte()

//console.log(len, item.text)

// 文字数に応じてフォントサイズを変更する

if(len > min && len <= max) {

item.setAttribute('style', 'font-size: 0.9em')

console.log(item)

} else if(len > max) {

item.setAttribute('style', 'font-size: 1px') // or 0.5em

console.log(item)

}

})

})