javascript - Javascript 变音符号不敏感搜索
问题描述
我正在为网络浏览器(如⌘ + F)制作文本搜索功能,并且试图使搜索变音符号不敏感,但我不知道该怎么做。
所以基本上如果页面上有这样的文字:
يُرِدُ
我搜索:
يرد
它应该仍然有效。
这是我发现并正在使用的纯 javascript:
var uiWebview_SearchResultCount = 0;
function uiWebview_HighlightAllOccurencesOfStringForElement(element,keyword) {
if (element) {
if (element.nodeType == 3) { // Text node
var count = 0;
var elementTmp = element;
while (true) {
var value = elementTmp.nodeValue; // Search for keyword in text node
var idx = value.toLowerCase().indexOf(keyword);
if (idx < 0) break;
count++;
elementTmp = document.createTextNode(value.substr(idx+keyword.length));
}
uiWebview_SearchResultCount += count;
var index = uiWebview_SearchResultCount;
while (true) {
var value = element.nodeValue; // Search for keyword in text node
var idx = value.toLowerCase().indexOf(keyword);
if (idx < 0) break; // not found, abort
//we create a SPAN element for every parts of matched keywords
var span = document.createElement("span");
var text = document.createTextNode(value.substr(idx,keyword.length));
var spacetxt = document.createTextNode("\u200D");//\u200D
span.appendChild(text);
span.appendChild(spacetxt);
span.setAttribute("class","uiWebviewHighlight");
span.style.backgroundColor="#007DC8a3";
span.style.borderRadius="3px";
index--;
span.setAttribute("id", "SEARCH WORD"+(index));
//span.setAttribute("id", "SEARCH WORD"+uiWebview_SearchResultCount);
//element.parentNode.setAttribute("id", "SEARCH WORD"+uiWebview_SearchResultCount);
//uiWebview_SearchResultCount++; // update the counter
text = document.createTextNode(value.substr(idx+keyword.length));
element.deleteData(idx, value.length - idx);
var next = element.nextSibling;
//alert(element.parentNode);
element.parentNode.insertBefore(span, next);
element.parentNode.insertBefore(text, next);
element = text;
}
} else if (element.nodeType == 1) { // Element node
if (element.style.display != "none" && element.nodeName.toLowerCase() != 'select') {
for (var i=element.childNodes.length-1; i>=0; i--) {
uiWebview_HighlightAllOccurencesOfStringForElement(element.childNodes[i],keyword);
}
}
}
}
}
// the main entry point to start the search
function uiWebview_HighlightAllOccurencesOfString(keyword) {
uiWebview_RemoveAllHighlights();
uiWebview_HighlightAllOccurencesOfStringForElement(document.body, keyword.toLowerCase());
}
// helper function, recursively removes the highlights in elements and their childs
function uiWebview_RemoveAllHighlightsForElement(element) {
if (element) {
if (element.nodeType == 1) {
if (element.getAttribute("class") == "uiWebviewHighlight") {
var text = element.removeChild(element.firstChild);
element.parentNode.insertBefore(text,element);
element.parentNode.removeChild(element);
return true;
} else {
var normalize = false;
for (var i=element.childNodes.length-1; i>=0; i--) {
if (uiWebview_RemoveAllHighlightsForElement(element.childNodes[i])) {
normalize = true;
}
}
if (normalize) {
element.normalize();
}
}
}
}
return false;
}
// the main entry point to remove the highlights
function uiWebview_RemoveAllHighlights() {
uiWebview_SearchResultCount = 0;
uiWebview_RemoveAllHighlightsForElement(document.body);
}
function uiWebview_ScrollTo(idx) {
var idkNum = uiWebview_SearchResultCount - idx
var scrollTo = document.getElementById("SEARCH WORD" + idkNum);
if (scrollTo) scrollTo.scrollIntoView();
}
如果搜索不包含整个单词,它还存在将单词分开的问题。
我找到了这个,它完全符合我的要求(包括不区分变音符号的搜索),但问题是它在 JQuery 中,我不确定如何在我的代码中实现它。我将如何实施它?
解决方案
像这样的东西可以帮助
function removeArabicDiacritics(text = '') {
return text
.normalize('NFD')
.replace(/[\u064B-\u065B]/g, '');
}
const withDiacritics = 'يُرِدُ';
const noDiacritics = 'يرد';
function insensitiveArabicSearch(text, query) {
const cleanedText = removeArabicDiacritics(text);
const cleanedQuery = removeArabicDiacritics(query);
return cleanedText.includes(cleanedQuery);
}
const found = insensitiveArabicSearch(withDiacritics, noDiacritics);
console.log(`Does ${withDiacritics} contain ${noDiacritics} ?`, found ? 'Yes' : 'No');
推荐阅读
- build.gradle - 添加代码之前构建失败。这怎么可能?
- java - 一个 @PreAuthorize("hasAuthority('ACCOUNT OWNER')" 有效,另一个非常相似 - 抛出 SpelEvaluationException
- powershell - schtasks 失败并在脚本中拒绝访问
- neo4j - Neovis.js 未在 Salesforce Lightning Web 组件中完全呈现
- c# - 如何使用 NpgsqlConnection.Notification 中的信息进行新查询
- java - 确保在 Windows 和 Linux 中的安全文件访问
- xcode - 如何在 ViewController 中居中多个按钮?
- wpf - 具有多个 ItemsPresenter 的 WPF ComboBox
- java - 如何在弹性搜索中对关键字类型字段使用平均聚合
- php - 嵌套数组中的 Gwt 数据字符串