JS RegExp查找不在标签中的单词并替换字符串[重复]

Question

我需要编写第二个 RegExp 以在 sentence 内找到不在标签中的变量 d。所以标签中的变量应该被跳过。

Regex '(?:^|\\b)('+d+')(?=\\b|$)' 会找到 d 变量，但我需要用 class="description" 排除 <span> 标记。 新句子被包裹在新标签中。

sentence = "This is some word. <span class='description'>word</span> in tag should be skipped"
d = 'word'
re = new RegExp('(?:^|\\b)('+d+')(?=\\b|$)', 'gi')
sentence = sentence.replace(re, "<span>$1</span>")

我想要达到的结果是：

"This is some <span>word</span>. <span class='description'>word</span> in tag should be skipped"

我正在使用coffeescript，感谢您的帮助。

Answer 1

试试这个：(word)(?![^<>]*<\/)

完整代码：

var sentence = "This is some word. <span class='description'>word</span> in tag should be skipped"
var d = 'word'
var re = new RegExp('('+d+')(?![^<>]*<\/)', 'gi')
sentence = sentence.replace(re, "<span>$1</span>")

我的这个答案基于这个 sn-p：https://regex101.com/library/gN4vI6

Answer 2

尝试使用正则表达式来操作 HTML 不是一个好主意：迟早你会遇到一些边界条件，它会失败。可能一些< 或> 出现在属性值内部，甚至文本节点内部，而搜索到的词也可能出现在意想不到的地方，如HTML cmets、属性值或脚本标签中，... 边界列表案例很长。

此外，您的搜索词可能包含在正则表达式语法中具有特殊含义的字符，因此您至少应该转义这些字符。

这是一个将字符串解释为 HTML 的解决方案，使用 DOM 功能，并且只替换文本节点中的文本：

function escapeRegExp(str) {
    return str.replace(/[\[\]\/{}()*+?.\\^$|-]/g, "\\$&");
}

function wrapText(sentence, word) {        
    const re = new RegExp("\\b(" + escapeRegExp(word) + ")\\b", "gi"),
        span = document.createElement('span');
    span.innerHTML = sentence;
    Array.from(span.childNodes, function (node) {
        if (node.nodeType !== 3) return;
        node.nodeValue.split(re).forEach(function (part, i) {
            let add;
            if (i%2) {
                add = document.createElement('span');
                add.textContent = part;
                add.className = 'someClass';
            } else {
                add = document.createTextNode(part);
            }
            span.insertBefore(add, node);
        });
        span.removeChild(node);
    });
    return span.innerHTML;
}

const html = 'This is some word. <span class="word">word</span> should stay',
    result = wrapText(html, 'word');

console.log(result);

递归到元素中

在您提到的 cmets 中，您现在还希望在某些标签中进行替换，例如 p。

我假设您希望所有元素都发生这种情况，除了那些具有特定类的元素，例如您用于包装 span 元素的类，但您当然可以根据需要自定义条件（例如仅递归到 p 或 ...）。

代码只需要少量修改：

function escapeRegExp(str) {
    return str.replace(/[\[\]\/{}()*+?.\\^$|-]/g, "\\$&");
}

function wrapText(sentence, word) {        
    const re = new RegExp("\\b(" + escapeRegExp(word) + ")\\b", "gi"),
        doc = document.createElement('span');
    doc.innerHTML = sentence;
    
    (function recurse(elem) {
        Array.from(elem.childNodes, function (node) {
            // Customise this condition as needed:
            if (node.classList && !node.classList.contains('someClass')) recurse(node);
            if (node.nodeType !== 3) return;
            node.nodeValue.split(re).forEach(function (part, i) {
                let add;
                if (i%2) {
                    add = document.createElement('span');
                    add.textContent = part;
                    add.className = 'someClass';
                } else {
                    add = document.createTextNode(part);
                }
                elem.insertBefore(add, node);
            });
            elem.removeChild(node);
        });
    })(doc);        
    return doc.innerHTML;
}
const html = '<p><b>Some word</b></p>. <span class="someClass">word</span> should stay',
    result = wrapText(html, 'word');
console.log(result);