Javascript 变音符号不敏感搜索

Question

我正在为 Web 浏览器(如 ⌘ + 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();
}

如果搜索不包含整个单词，它还有一个将单词分开的问题。

我找到了 this它完全符合我的要求(包括不区分变音符号的搜索)，但问题是它在 JQuery 中，我不确定如何在我的代码中实现它。我将如何实现它？

Answer 1

这样的事情可能会有所帮助

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');