এখানে প্রদত্ত সমাধানগুলি বেশ খারাপ।
- আপনি রেজেক্স ব্যবহার করতে পারবেন না, কারণ আপনি এইচটিএমএল ট্যাগগুলিতে অনুসন্ধান / হাইলাইট করেন।
- আপনি রিজেক্স ব্যবহার করতে পারবেন না, কারণ এটি ইউটিএফ * (ল্যাটিন / ইংরেজি অক্ষরের সাথে কোনও কিছুই) দিয়ে সঠিকভাবে কাজ করে না।
- কারণ এই যখন অক্ষর একটি বিশেষ HTML স্বরলিপি, যেমন নেই কাজ করে আপনি শুধু একটি innerHTML.replace ব্যবহার করতে পারবেন না,
&এর জন্য &, <<, জন্য >জন্য>, äএকটি জন্য, öহে জন্য üতোমার জন্য ßSS জন্য, ইত্যাদি
তোমাকে যা করতে হবে:
লুপ HTML ডকুমেন্ট মাধ্যমে সমস্ত পাঠ্য নোড খুঁজে পেতে, textContentসঙ্গে হাইলাইট টেক্সট অবস্থান পেতে indexOf(একটি ঐচ্ছিক সঙ্গে toLowerCaseযদি এটা কেস-অবশ হওয়া উচিত) পরিশেষে যোগ সবকিছু আগে, indexofযেমন textNode, পরিশেষে যোগ একটি হাইলাইট বিঘত সঙ্গে মিলেছে পাঠ্য, এবং বাকী পাঠ্য নোডের জন্য পুনরাবৃত্তি করুন (হাইলাইট স্ট্রিংটি স্ট্রিংয়ে একাধিকবার সংঘটিত হতে পারে textContent)।
এর জন্য কোডটি এখানে:
var InstantSearch = {
"highlight": function (container, highlightText)
{
var internalHighlighter = function (options)
{
var id = {
container: "container",
tokens: "tokens",
all: "all",
token: "token",
className: "className",
sensitiveSearch: "sensitiveSearch"
},
tokens = options[id.tokens],
allClassName = options[id.all][id.className],
allSensitiveSearch = options[id.all][id.sensitiveSearch];
function checkAndReplace(node, tokenArr, classNameAll, sensitiveSearchAll)
{
var nodeVal = node.nodeValue, parentNode = node.parentNode,
i, j, curToken, myToken, myClassName, mySensitiveSearch,
finalClassName, finalSensitiveSearch,
foundIndex, begin, matched, end,
textNode, span, isFirst;
for (i = 0, j = tokenArr.length; i < j; i++)
{
curToken = tokenArr[i];
myToken = curToken[id.token];
myClassName = curToken[id.className];
mySensitiveSearch = curToken[id.sensitiveSearch];
finalClassName = (classNameAll ? myClassName + " " + classNameAll : myClassName);
finalSensitiveSearch = (typeof sensitiveSearchAll !== "undefined" ? sensitiveSearchAll : mySensitiveSearch);
isFirst = true;
while (true)
{
if (finalSensitiveSearch)
foundIndex = nodeVal.indexOf(myToken);
else
foundIndex = nodeVal.toLowerCase().indexOf(myToken.toLowerCase());
if (foundIndex < 0)
{
if (isFirst)
break;
if (nodeVal)
{
textNode = document.createTextNode(nodeVal);
parentNode.insertBefore(textNode, node);
}
parentNode.removeChild(node);
break;
}
isFirst = false;
begin = nodeVal.substring(0, foundIndex);
matched = nodeVal.substr(foundIndex, myToken.length);
if (begin)
{
textNode = document.createTextNode(begin);
parentNode.insertBefore(textNode, node);
}
span = document.createElement("span");
span.className += finalClassName;
span.appendChild(document.createTextNode(matched));
parentNode.insertBefore(span, node);
nodeVal = nodeVal.substring(foundIndex + myToken.length);
}
}
};
function iterator(p)
{
if (p === null) return;
var children = Array.prototype.slice.call(p.childNodes), i, cur;
if (children.length)
{
for (i = 0; i < children.length; i++)
{
cur = children[i];
if (cur.nodeType === 3)
{
checkAndReplace(cur, tokens, allClassName, allSensitiveSearch);
}
else if (cur.nodeType === 1)
{
iterator(cur);
}
}
}
};
iterator(options[id.container]);
}
;
internalHighlighter(
{
container: container
, all:
{
className: "highlighter"
}
, tokens: [
{
token: highlightText
, className: "highlight"
, sensitiveSearch: false
}
]
}
);
}
};
তারপরে আপনি এটি ব্যবহার করতে পারেন:
function TestTextHighlighting(highlightText)
{
var container = document.getElementById("testDocument");
InstantSearch.highlight(container, highlightText);
}
এইচটিএমএল ডকুমেন্টের একটি উদাহরণ এখানে
<!DOCTYPE html>
<html>
<head>
<title>Example of Text Highlight</title>
<style type="text/css" media="screen">
.highlight{ background: #D3E18A;}
.light{ background-color: yellow;}
</style>
</head>
<body>
<div id="testDocument">
This is a test
<span> This is another test</span>
äöüÄÖÜäöüÄÖÜ
<span>Test123äöüÄÖÜ</span>
</div>
</body>
</html>
যাইহোক, আপনি যদি একটি ডাটাবেস দিয়ে অনুসন্ধান করেন LIKE,
যেমন WHERE textField LIKE CONCAT('%', @query, '%')[যা আপনার করা উচিত নয়, আপনার ফুলটেক্সট-অনুসন্ধান বা লুসিন ব্যবহার করা উচিত], তবে আপনি প্রতিটি অক্ষরকে character দিয়ে পালাতে পারেন এবং একটি এসকিউএল-এসেসেপ-স্টেটমেন্ট যুক্ত করতে পারেন, সেভাবে আপনি বিশেষ অক্ষরগুলি দেখতে পাবেন যেগুলি লাইক-এক্সপ্রেশন।
যেমন
WHERE textField LIKE CONCAT('%', @query, '%') ESCAPE '\'
এবং @ ক্যোয়ারির মানটি কিন্তু '%completed%'নয়'%\c\o\m\p\l\e\t\e\d%'
(পরীক্ষিত, এসকিউএল-সার্ভার এবং পোস্টগ্র্যাস এসকিউএল এবং ESCAPE সমর্থন করে এমন প্রতিটি আরডিবিএমএস সিস্টেমের সাথে কাজ করে)
একটি সংশোধিত টাইপস্ক্রিপ্ট-সংস্করণ:
namespace SearchTools
{
export interface IToken
{
token: string;
className: string;
sensitiveSearch: boolean;
}
export class InstantSearch
{
protected m_container: Node;
protected m_defaultClassName: string;
protected m_defaultCaseSensitivity: boolean;
protected m_highlightTokens: IToken[];
constructor(container: Node, tokens: IToken[], defaultClassName?: string, defaultCaseSensitivity?: boolean)
{
this.iterator = this.iterator.bind(this);
this.checkAndReplace = this.checkAndReplace.bind(this);
this.highlight = this.highlight.bind(this);
this.highlightNode = this.highlightNode.bind(this);
this.m_container = container;
this.m_defaultClassName = defaultClassName || "highlight";
this.m_defaultCaseSensitivity = defaultCaseSensitivity || false;
this.m_highlightTokens = tokens || [{
token: "test",
className: this.m_defaultClassName,
sensitiveSearch: this.m_defaultCaseSensitivity
}];
}
protected checkAndReplace(node: Node)
{
let nodeVal: string = node.nodeValue;
let parentNode: Node = node.parentNode;
let textNode: Text = null;
for (let i = 0, j = this.m_highlightTokens.length; i < j; i++)
{
let curToken: IToken = this.m_highlightTokens[i];
let textToHighlight: string = curToken.token;
let highlightClassName: string = curToken.className || this.m_defaultClassName;
let caseSensitive: boolean = curToken.sensitiveSearch || this.m_defaultCaseSensitivity;
let isFirst: boolean = true;
while (true)
{
let foundIndex: number = caseSensitive ?
nodeVal.indexOf(textToHighlight)
: nodeVal.toLowerCase().indexOf(textToHighlight.toLowerCase());
if (foundIndex < 0)
{
if (isFirst)
break;
if (nodeVal)
{
textNode = document.createTextNode(nodeVal);
parentNode.insertBefore(textNode, node);
}
parentNode.removeChild(node);
break;
}
isFirst = false;
let begin: string = nodeVal.substring(0, foundIndex);
let matched: string = nodeVal.substr(foundIndex, textToHighlight.length);
if (begin)
{
textNode = document.createTextNode(begin);
parentNode.insertBefore(textNode, node);
}
let span: HTMLSpanElement = document.createElement("span");
if (!span.classList.contains(highlightClassName))
span.classList.add(highlightClassName);
span.appendChild(document.createTextNode(matched));
parentNode.insertBefore(span, node);
nodeVal = nodeVal.substring(foundIndex + textToHighlight.length);
}
}
}
protected iterator(p: Node)
{
if (p == null)
return;
let children: Node[] = Array.prototype.slice.call(p.childNodes);
if (children.length)
{
for (let i = 0; i < children.length; i++)
{
let cur: Node = children[i];
if (cur.nodeType === Node.TEXT_NODE)
{
this.checkAndReplace(cur);
}
else if (cur.nodeType === Node.ELEMENT_NODE)
{
this.iterator(cur);
}
}
}
}
public highlightNode(n:Node)
{
this.iterator(n);
}
public highlight()
{
this.iterator(this.m_container);
}
}
}
ব্যবহার:
let searchText = document.getElementById("txtSearchText");
let searchContainer = document.body;
let highlighter = new SearchTools.InstantSearch(searchContainer, [
{
token: "this is the text to highlight"
className: "highlight",
sensitiveSearch: false
}
]);
highlighter.highlightNode(td2);