![](/img/trans.png)
[英]Javascript Regex to match standalone S without matching apostrophe S
[英]Regex to match string with or without apostrophe
我通過使用用戶輸入的查詢突出顯示搜索結果中的單詞。 一些結果包含像撇號這樣的符號,如果輸入撇號,我想使突出顯示起作用。 所以,如果我有這個搜索結果
帕特里克奧哈根
並且用戶輸入
奧黑根
要么
Ohagan
它應該與突出顯示的部分相匹配:Patrick O'Hagan
實現這一點的一種方法,我想到的是通過在用戶輸入的每個字符后插入一個不需要的撇號來構建一個正則表達式,因此查詢ohagan將被轉換為此正則表達式:
/(o[']?h[']?a[']?g[']?a[']?n[']?)/gi
這有效但必須有更好的方法嗎?
編輯:我之前提供的示例並不清楚,因此我將提供一個示例代碼,該代碼應該顯示我想要實現的內容:
var resultText = 'Patrick O\'Hagan';
var query1 = 'o\'hagan';
var query2 = 'ohagan';
var regex1 = this.buildRegex(query1);
var regex2 = this.buildRegex(query2);
var highlightedText1 = resultText.replace(regex1, x => `<b>${x}</b>`);
var highlightedText2 = resultText.replace(regex2, x => `<b>${x}</b>`);
console.log(highlightedText1); //prints: Patrick <b>O'Hagan</b>;
console.log(highlightedText2); //prints: Patrick <b>O'Hagan</b>;
我正在尋找的是buildRegex
函數,它將構造一個與resultText
中的查詢匹配的正則表達式,但會忽略撇號。
|
對於每個角色 字符OR
字符后跟撇號
split()
關鍵字(例如obrien
) split()
分成一個字符數組:
var searchLetters = keyword.split('') // ['o','b','r','i','e','n']
map()
每個字符map()
到一個正則表達式字符串,該字符串將接受${
literal match }
OR |
${
literal match }
后跟一個聰明的引語: ['
或單引號: ']
:
var regexStrings = searchLetters.map(function(character) { return `(${character}|${character}[''])`; }); // [`(${o}|${o}[''])`,`(${b}|${b}[''])`,`(${r}|${r}[''])`...]
接下來, join()
的正則表達式字符串的新數組到一個單一的正則表達式字符串,並以使用它RegExp對象 :
var singleRegex = regexStrings.join(''); var regexObject = new RegExp(`(${singleRegex})`, `gi`);
RegExp對象將用於包裝與<mark>
標記匹配的任何內容:
var hits = targetContent.innerHTML.replace(regexObject, `<mark>$1</mark>`);
document.getElementById('search').addEventListener('change', function(e) { highlight(this.value, '#content'); }); function highlight(keyword, selector) { var node = document.querySelector(selector); var html = node.innerHTML; var clean = html.replace(/(<mark>|<\\/mark>)/, ''); var escaped = keyword.replace(/[.*+?^${}()|[\\]\\\\]/gi, '\\\\$&'); var letters = escaped.split('').map(function(letter) { return `(${letter}|${letter}[''])`; }); var string = letters.join(''); var regex = new RegExp(`(${string})`, `gi`); var hits = clean.replace(regex, `<mark>$1</mark>`); node.innerHTML = hits; }
<input id='search' type='search'><input type='button' value='search'> <article id='content'> <p>Murphy, Kelly, O'Sullivan, Walsh, Smith, O'Brien, Byrne, Ryan, O'Connor, O'Neill, O'Reilly, Doyle, McCarthy, Gallagher, O'Doherty, Kennedy, Lynch, Murray, Quinn, Moore, McLoughlin, O'Carroll, Connolly, Daly, O'Connell, Wilson, Dunne, Brennan, Burke, Collins, Campbell, Clarke, Johnston, Hughes, O'Farrell, Fitzgerald, Brown, Martin, Maguire, Nolan, Flynn, Thompson, O'Callaghan, O'Donnell, Duffy, O'Mahony, Boyle, Healy, O'Shea, White, Sweeney, Hayes, Kavanagh, Power, McGrath, Moran, Brady, Stewart, Casey, Foley, Fitzpatrick, O'Leary, McDonnell, MacMahon, Donnelly, Regan, Donovan, Burns, Flanagan, Mullan, Barry, Kane, Robinson, Cunningham, Griffin, Kenny, Sheehan, Ward, Whelan, Lyons, Reid, Graham, Higgins, Cullen, Keane, King, Maher, MacKenna, Bell, Scott, Hogan, O'Keeffe, Magee, MacNamara, MacDonald, MacDermott, Molony, O'Rourke, Buckley, O'Dwyer</p> </article>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.