Question

I want to find a match in a html string.

That will not be between html tags or inside them.

For example:

the word is : ue

<span color=blue>ue</span>ue<span>sdfsd</span>

so I want to find only the third match (not inside “blue”) and not between the span tags.

Thanks

Answer 1

You’re trying to use regular expressions to parse HTML. HTML cannot be readily, reliably processed with a regular expression on its own.

If you’re doing this on a browser, you can instead leverage the browser’s highly-optimized HTML parser.

If you want to detect the word when there’s a tag in-between (e.g., “u<hr>e”):

var element, node, topLevelText;
element = document.createElement('div');
element.innerHTML = "<span color=blue>ue</span>ue<span>sdfsd</span>";
topLevelText = "";
for (node = element.firstChild; node; node = node.nextSibling) {
    if (node.nodeType === 3) { // 3 = text node
        topLevelText += node.nodeValue;
    }
}
if (topLevelText.indexOf(word) >= 0) {
    // Found
}

If you only want to detect it between things (so, your example but not “u<hr>e”):

var element, node;
element = document.createElement('div');
element.innerHTML = "<span color=blue>ue</span>ue<span>sdfsd</span>";
for (node = element.firstChild; node; node = node.nextSibling) {
    if (node.nodeType === 3) { // 3 = text node
        if (node.nodeValue.indexOf(word) >= 0) {
            // Found
        }
    }
}

(Both of those do case-sensitive matching.)

That does this

1. Creates an element that isn’t displayed anywhere using document.createElement.
2. Parses the HTML text by assigning it to innerHTML on the element. This property has only recently been standardized, but it’s been supported by all major browsers for a decade or so.
3. Looks through the immediate children of the node, which will include any elements created by parsing, and text nodes for the top-level text in the string (e.g., text in the place where you want to search for it). This is using Node#firstChild, Node#nodeType, Node#nodeValue, and Node#nextSibling.
4. Depending on whether you want to find it in the “u<hr>e” situation, it either looks directly at the text in each of the text nodes, or it builds them all up into a string and searches that afterward.

The links above are mostly to the DOM2 Core spec, most of which is supported by most browsers. Other references that can be handy:

• DOM2 HTML specification (HTML-specific DOM stuff)
• DOM3 Core Spec (newer DOM stuff)