スマホの実機だとJavaScriptが動かない

前提

WEBサイトを制作しております。
ページ内の検索機能を付けましたが、
PCやGoogle Chromeの検証ページ（スマホサイズ含め）では動きますが
スマホの実機（iPhone）ですとJavaScriptが動きません。
とても困っております。

Safari、firefox、Google Chromeのスマホのブラウザを試しましたが動きませんでした。
複雑な事象かもしれませんが、どなたか教えて頂けませんでしょうか...

実現したいこと

スマホの実機でもページ検索機能を動作するようにする

該当のソースコード

html
1<body>
2    <div class="search-box">
3        <input id="product_word" placeholder="商品を検索する" type="text">
4        <button type="submit">検索</button>
5        </div>
6
7    <div id="product_area" class="product-list">
8
9        <div class="product_part">
10            <div class="column">
11                <div class="column__item1">商品名</div>
12                <div class="column__item2">ショウヒンメイノフリガナ</div>
13                <div class="column__item3"><img src="画像URL＃" alt="＃"></div>
14              </div>
15        </div>
16        
17        <div class="product_part">
18            <div class="column">
19                <div class="column__item1">カの商品</div>
20                <div class="column__item2">カノショウヒン</div>
21                <div class="column__item3"><img src="画像URL＃" alt="＃"></div>
22              </div>
23        </div>
24        
25        <div class="product_part">
26            <div class="column">
27                <div class="column__item1">サの商品</div>
28                <div class="column__item2">サノショウヒン</div>
29                <div class="column__item3"><img src="画像URL＃" alt="＃"></div>
30              </div>
31        </div>
32
33        <div class="product_part">
34            <div class="column">
35                <div class="column__item1">サンプル</div>
36                <div class="column__item2">サンプルノショウヒン</div>
37                <div class="column__item3"><img src="画像URL＃" alt="＃"></div>
38              </div>
39        </div>
40
41        <div class="product_part">
42            <div class="column">
43                <div class="column__item1">素晴らしい商品</div>
44                <div class="column__item2">スバラシイショウヒン</div>
45                <div class="column__item3"><img src="画像URL＃" alt="＃"></div>
46              </div>
47        </div>
48        
49        </div>
50
51
52        <script src="/js.js"></script>
53</body>

JavaScript
1const yougo_area = document.getElementById('product_area');
2const yougo_parts = document.getElementsByClassName('product_part');
3const input = document.getElementById('product_word');
4
5input.addEventListener('input',()=>{
6  reset();
7  const sword = input.value;
8  if(sword==''){return}
9  const regexp = new RegExp(`(?<=>)[^<>]*?(${sword})[^<>]*?(?=<)`,'gi');
10  const regexp2 = new RegExp(sword,'gi');
11  [...yougo_parts].forEach(part=>{
12    if(part.textContent.indexOf(sword)==-1){
13      part.classList.add('hide');
14    }else{
15      part.innerHTML=part.innerHTML.replace(regexp,function(){
16        return arguments[0].replace(regexp2,`<span class="highlight">${sword}</span>`);
17      });
18    }
19  });
20});
21
22function reset(){
23  console.log('reset');
24  [...document.getElementsByClassName('highlight')].forEach(el=>{
25    el.outerHTML=el.textContent;
26  });
27  [...document.getElementsByClassName('hide')].forEach(el=>{
28    el.classList.remove('hide');
29  });
30}

CSS
1.highlight{
2    background-color:yellow;
3  }
4  .hide{
5    display: none;
6  }
7
8/* 以下はCSS装飾*/
9  .product-list{
10	margin: 0 auto;
11}
12.column {
13    display: flex;
14    margin-left: -10px; /* カラム間の隙間 */
15    border-top: solid 2px #333;
16	max-width:1280px;
17	
18  }
19  .column__item1 ,.column__item2, .column__item3 {
20    box-sizing: border-box;
21    flex-shrink: 1;
22    padding: 15px;
23    margin-left: 10px; /* カラム間の隙間 */
24	
25  }
26  .column__item1{
27    flex-basis:30%;
28  }
29  .column__item2{
30    flex-basis:50%;
31}
32
33.column__item3{
34    flex-basis:20%;
35    text-align: right;
36}
37
38.column__item3 img{
39    height: 22px;
40}
41
42  .column:hover{
43    background-color: #E5E5E5;
44  }

試したこと

スマホブラウザにて、
JavaScriptは「オン」になっていても動かなかったです。
いろいろお調べしましたが私にはわかりませんでした。

補足情報（FW/ツールのバージョンなど）

WordPressでのホームページ内での検索機能です。

maisumakun

2022/12/24 09:33

> Safari、firefox、Google Chromeのスマホのブラウザを試しましたが動きませんでした。回答にならないのでここに書きますが、iOS上で動くブラウザは共通のエンジンを使うことになっているので、JavaScriptなどの対応状況はどのブラウザであっても基本的に同じです。

fuku

2022/12/24 10:40

ご回答ありがとうございます。どのブラウザであっても基本的に同じという情報はありがたいです。

m.ts10806

2022/12/24 11:40 編集

全く動かないのか、一部でも動いているかは問題切り分けとして確認されたほうが良いと思います。 alert()で出力しても良いですし、実機でもデベロッパツールを使う方法はあります。

行動規範の内容に同意します

回答2件

正規表現のエラーかと思われます。

Safariで後読み正規表現が使いたい時の諦め方

投稿2022/12/26 05:48

a.‫com

総合スコア871

SpreadElement

Safari、firefox、Google Chromeのスマホのブラウザを試しましたが動きませんでした。

実機(iPhone)がないのであたっているか、わかりませんが…。

javascript
1[...document.getElementsByClassName('highlight')].forEach(el=>{
2  el.outerHTML=el.textContent;
3});
4[...document.getElementsByClassName('hide')].forEach(el=>{
5    el.classList.remove('hide');
6  });

DOM Standard仕様上、HTMLCollectionはiterable(反復可能)ではないので、SpreadElementが動かない挙動が正解です。

forEach を使いたいのであれば、NodeList を使うのがベターだと思います。

javascript
1document.querySelectorAll('.highlight').forEach(el => el.outerHTML = el.textContent);
2document.querySelectorAll('.hide').forEach(el => el.classList.remove('hide'));

本題とは関係ありませんが、el.outerHTML = el.textContent は、textContent値にHTMLタグが含まれていた場合、コード実行後に元のテキストノード値を復元できない問題があります。

html
1<span id="test">&lt;strong&gt;foo&lt;/strong&gt;</span>
2<script>
3'use strict';
4const span = document.getElementById('test');
5span.outerHTML = span.textContent;
6</script>