JS正則表達式不包含在<a>中的單詞？

我使用下面的js來突出顯示在html中搜索到的字符串的內容，但問題是這也影響了url字符串。JS正則表達式不包含在<a>中的單詞？

var a = new RegExp(keywords, "igm"); 
container.innerHTML = container.innerHTML.replace(a, "<span style='background:#FF0;'>" + keywords + "</span>");

如果關鍵字是URL，然後將URL與xxxx.com/<span style='background:#FF0;'>product</span>這是錯誤的relaced。

那麼有什麼辦法可以過濾出不包含在url中的單詞嗎？不確定是否有RegExp可以做到這一點。提前致謝。

來源

2014-05-03 JerryCai

那麼，你不希望將innerHTML替換爲字符串，因爲這也會中斷容器中元素的當前eventListeners。您需要遍歷DOM節點，並使用parentNode上的條件檢查在textNodes上顯式執行替換操作。 – BGerrissen

可能重複的[如何使用JavaScript突出顯示文本]（http://stackoverflow.com/questions/8644428/how-to-highlight-text-using-javascript） –

@Jack，看起來你的鏈接是關於簡單替換而已比避免HTML代碼。 @JerryCai只想對渲染文本進行操作而不影響代碼，例如''stuff fox'.safe_replace（/ f/igm，「b」）'會變成'stuff box'（或stubb？那部分對我來說不清楚）。 –

下面是一段代碼，做什麼你問：

// prepare the replacement as a function 
function do_replacement(node) { 
    var a = new RegExp(keywords, "igm"); 
    node.innerHTML = node.innerHTML.replace(a, 
    "<span style='background:#FF0;'>" + keywords + "</span>"); 
} 

// back up the links 
var link_backups = new Array(); 
var link_refs = new Array(); 
var container_links = container.getElementsByTagName("a"); 
for (var i = 0; i < container_links.length; i++) { 
    var copy = container_links[i].cloneNode(true); 
    // the link target (href) is not contained in the link's innerHTML 
    // remove this line if you don't want to replace the link's TEXT 
    do_replacement(copy); 
    link_backups.push(copy); 
    link_refs[i] = container_links[i]; 
} 

do_replacement(container); 

// restore the backed up links 
// (this uses link_refs[] because container_links[] could have changed) 
for (var i = 0; i < link_refs.length; i++) { 
    container.replaceChild(link_backups[i], link_refs[i]); 
}

這將（可能）失敗，如果你keywords標籤名稱（<a>）的鏈接，例如匹配當時keywords = "a"。

但是，我相信你只會碰到另一個你實際上不想替換的HTML代碼實例。 JS實際上並沒有最好的方式來操縱DOM的文本。例如，更改Node.textContent將會終止該節點的所有HTML內容。

來源

2014-05-05 01:52:07

JS正則表達式不包含在<a>中的單詞？

回答

相關問題