含变音字符的搜索结果标签页Href链接失效问题求助

问题详情 #

我司搜索站点finna.nu（非本人开发）的搜索结果列表上方有两个标签页功能异常，问题和变音字符（ä、ö）以及标签页的Href链接直接相关。

搜索后会显示三个标签页：

• Produkt/tjänst：链接为 https://finna.nu/?sok=&sokvad=rekrytering&sokvar=&sokb=#Produkt/tj%C3%A4nst
• Bransch：链接为 https://finna.nu/?sok=&sokvad=rekrytering&sokvar=&sokb=#Bransch
• Företag（公司）：链接为 https://finna.nu/?sok=&sokvad=rekrytering&sokvar=&sokb=#F%C3%B6retag

其中Produkt/tjänst和Företag标签页无法正常工作：

• 点击Företag标签页无任何反应；
• 切换回Produkt/tjänst标签页时，控制台抛出错误：

Uncaught Error: Syntax error, unrecognized expression: #Produkt/tjänst
at fa.error (jquery-bootstrap.js:2:12733)

技术环境与相关代码 #

站点使用旧版本jQuery（1.12.2）和jQuery UI（1.12.1），标签页生成的核心代码如下：

$.each(data, function()
{
head = arguments[0];
/* if (String('<?php echo $_GET['sokvad']; ?>').toLowerCase() == 'finnerboda kommun') {
    $('body').removeClass( "finna" ).addClass( "finnerboda" );
}*/
if (head == 'cssclass') {
 if (this.length == 0) {
   $('body').attr( 'class', 'finna' );
 }
 else {
   $('body').attr( 'class', this );
 }
 return true;
}

head = head.substr(0, 5) + count;
$('ul#tabs').append('<li><a data-toggle="pill" class="pillbg" href="#' + head + '">' + arguments[0] + ' (' + this.count + ' tr&auml;ffar)</a></li>');

if (head == 'Prod' + count)
  {
    sokord = this.count;
  }

if (head == 'F&#246;re' + count)
  {
    foretag = this.count;
  }

if (head == 'Bran' + count)
  {
    bransch = this.count;
  }

已尝试但无效的解决方案 #

• 升级jQuery至2.x或3.x版本
• 在PHP文件开头添加字符编码声明：header("Content-type: text/html;charset=UTF-8");
• 通过控制台日志排查问题
• 多次修改代码尝试修复
• 将与"företag"相关的相等判断==替换为严格相等===

最小可复现代码 #

<?php ini_set('memory_limit', '768M'); header("Content-type: text/html;charset=UTF-8"); ?>
<link rel="stylesheet" href="./assets/jquery-ui/jquery-ui.min.css" type="text/css" />
<script language="JavaScript" type="text/javascript" type="application/javascript">
        
var pagedata;
var count = 0;
var tabcount = [];

function MakeItem(object) {
 if (object === Object(object)) {
  return    '<div class="panel panel-default">' +
   /* div that contains info about the object in search result list */
    '</div>';
     } else { return '...';}
}

var glbstart = 0;

function GetData(start) {
  glbstart = start;

 var ajx = $.post('./api/dosearch.php',
 {

  sokvad: "<?php echo $_GET['sokvad']; ?>",
  sokvar: "<?php echo $_GET['sokvar']; ?>",
  limit: glbstart

 }, "json").always(function(data) {
  if (glbstart == 0) {
     $('ul#tabs').empty();
     $('div#tabcontents').empty();        
  }
  if (($.isEmptyObject(data)) && (glbstart == 0)) {
     $('#msg').html("No match in the database!");
  }
  else {
  if (glbstart == 0)
 {
 $('#msg').empty();

  var head = '';
  var content;
  pagedata = data;
  var reclimit;
  var countres = 0;

  var sokord = 0;
  var foretag = 0;
  var bransch = 0;

$.each(data, function() {
  head = arguments[0];

  <?php echo $_GET['sokvad']; ?>

  if (head == 'cssclass') {
   if (this.length == 0) {
    $('body').attr( 'class', 'finna' );
  } else {
    $('body').attr( 'class', this );
  }
  return true;
  }

  $('ul#tabs').append('<li id="pilltab"><a data-toggle="pill" class="pillbg" href="#' + head + '">' + arguments[0] + ' (' + this.count + ' tr&auml;ffar)</a></li>');
                                   
if (head == 'Prod' + count){
sokord = this.count;
}

if (head == 'F&#246;re' + count){
foretag = this.count;
}

if (head == 'Bran' + count){
bransch = this.count;
}

content = document.createElement('div');
$(content).attr('id', head).height(700).attr('class', 'infinitescroll tab-pane fade in').attr('srcel', arguments[0]).infinitescroll(
 {
  //dataSource is required to append additional content
  dataSource: function(helpers, callback) {
   var activetabcontent = $("#tabcontents").children("div.active");

   if (tabcount[activetabcontent.attr('srcel')] + 1 < pagedata[activetabcontent.attr('srcel')].count) 
   { 
     if (tabcount[activetabcontent.attr('srcel')] == pagedata[activetabcontent.attr('srcel')].result.length-1) { 
      GetData(pagedata[activetabcontent.attr('srcel')].result.length).then(
       function(){ 
        tabcount[activetabcontent.attr('srcel')] = tabcount[activetabcontent.attr('srcel')] + 1;
       callback({
      content: MakeItem(pagedata[activetabcontent.attr('srcel')].result[tabcount[activetabcontent.attr('srcel')]])
     });
    },

 function() { // GetData failed
  callback ({ end: true });
 }

 );
 } else { 
    // Retrieve from local variable
    tabcount[activetabcontent.attr('srcel')] = tabcount[activetabcontent.attr('srcel')] + 1;
    // $('#msg').text(tabcount[activetabcontent.attr('srcel')]);
    callback
     ({ content: MakeItem(pagedata[activetabcontent.attr('srcel')].result[tabcount[activetabcontent.attr('srcel')]])  });
 }
} else {
     callback ({ end: true });
}
 }
 }
);
document.getElementById('tabcontents').appendChild(content);

var reclimit = 0;

$.each(this.result, function() {
 if (reclimit == 10) { return true; }
  count = count + 1;
  $(content).append(MakeItem(this));
  reclimit = reclimit + 1;
});

tabcount[arguments[0]] = reclimit;
 countres = countres + this.length;
});

if ((sokord == 0) && (bransch < foretag)) {
 $('ul#tabs').children(':first').addClass('active');
 $('div#tabcontents').children(':first').addClass('active');
}

else if ((sokord == 0) && (foretag < bransch)) {
 $('ul#tabs').children(':last').addClass('active');
 $('div#tabcontents').children(':first').addClass('active');
}

else {
 $('ul#tabs').children(':first').addClass('active');
 $('div#tabcontents').children(':first').addClass('active');
}

} // start=0
else
{
//$('#msg').append('Hamtat mera');
$.each(data, function(){
  var list = '';
  list = arguments[0];

  $.merge(pagedata[list].result, this.result);
   });
  }
 }
 });
 return ajx;
}

$(document).ready(function(){
 GetData(0);
});

</script>
        
<div id="sok-page-container" class="container fuelux well">
            
 <!-- // Top searchform -->
 <div class="row sform mobile">
  <div class="speedsearch">
   <ul id="content"></ul>
  </div>
 </div>

 <div id="tabplatta" class="row">
  <div class="col-lg-12">
  <br />
   <div id="content" class="col-lg-12">
    <span id="msg" class="" style="font-weight:bold;color:#FF0000;"></span>
    <ul class="tabs-menu nav nav-pills" id="tabs"></ul>
    <div class="tab-content" id="tabcontents"></div>
   </div>
  </div>
 </div>
 </div>
</div>

内容的提问来源于stack exchange，提问作者PrimaryGroupEmployee