使用正則表達式搜索文本，而忽略html標簽

Question

我需要在搜索到的文本周圍添加突出顯示類。 但是其他html標記妨礙了我。 這是一個例子：

從...開始：

<div class="source">your <b><i>text</i></b> using <a href="#">regex ignoring html</a> tags</div>

我搜索： text using regex

預期的結果（在此示例中，我將使用span突出顯示）：

<div class="source">your <b><i><span>text</span></i></b><span> using </span><a href="#"><span>regex</span> ignoring html</a> tags</div>

我對此有解決方案，但是它需要特定的正則表達式來搜索忽略HTML標簽的文本。 如果有其他解決方案，請在下面提出。 而且它不必用vanilla js編寫 。 下面是我當前解決方案的簡化版本，缺少提到的正則表達式。

下面的示例由於缺少正則表達式而無法正常工作

var source = document.querySelector('.source').innerHTML; // html from example
var text = 'text using regex'; // what we searching for
var htmlTag = new RegExp('(<\\/?([a-z]+)([^<]+)*(?:>))+', 'g'); // find html tags
var missingRegExp = new RegExp('', 'i'); // << missing regex

// Wrap searched text with span tag
var result = source.replace(missingRegExp, function (searchedText) {
  // Wrap html tags inside searched text with span tag
  searchedText = searchedText.replace(htmlTag, function (match) {
    return '</span>' + match + '<span>';
  });

  return '<span>' + searchedText + '</span>';
});

console.log('Result: ' + result);

在這種情況下，刪除html標簽不是一個選擇。

Answer 1

您text using regex有一個類似於text using regex的字符串。 您應該關心中間空格，並用適當的RegEx替換它們以匹配HTML標記，但是首先需要將每個單詞括在括號中：

> '(' + "text using regex".split(' ').join(') (') + ')'
< "(text) (using) (regex)"

下一步是用RegEx替換空格： ((?:\\s*(?:<\\/?\\w[^<>]*>)?\\s*)*)所以我們最后修改的版本應該是：

< "(text)((?:\s*(?:<\/?\w[^<>]*>)?\s*)*)(using)((?:\s*(?:<\/?\w[^<>]*>)?\s*)*)(regex)"

如果我們有3個單詞要搜索，那么我們最終將總共有5個捕獲組（ n單詞-> n + n-1捕獲組），因此您應該基於此創建替換字符串。 在這里，我們應該有這樣的替換字符串：

<span>$1</span>$2<span>$3</span>$4<span>$5</span>

現在，您有了已編譯的RegEx版本和替換字符串， .replace()方法將成功結束它們。

現場演示