Regular expression for visible text, not HTML

Question

If I had a line:

hey <a href="#user">user</a>, what are you doing?

How with a regular expression can I say: search user, but not inside characters <or >? So a match will grab the user between <a></a>, but not insidehref

I would like this to work for any tag, so it doesn't matter which tags.

== Update ==

Why can't I use .text()either innerText because it is used to highlight results similar to cmd / ctrl + f built-in functions in browsers and I don’t want to lose formatting. For example, if I search stronghere:

Some <strong>strong</strong> text.

If I use .text(), itll will return “Some strong text”, and then I wrap it strongwith a help <span>that has a class for styling, but now when I return and try to insert this into the DOM there will be no tags <strong>.

Answer 1

If you again want to replace HTML with html(), then you will lose all the event handlers that can be attached to the internal elements and them data(as I said in my comment).

Whenever you set the contents of an element as an HTML string, you create new elements.

node. - :

$.fn.highlight = function(word) {
    var pattern = new RegExp(word, 'g'),
        repl = '<span class="high">' + word + '</span>';

    this.each(function() {
        $(this).contents().each(function() {
            if(this.nodeType === 3 && pattern.test(this.nodeValue)) {
                $(this).replaceWith(this.nodeValue.replace(pattern, repl));
            }
            else if(!$(this).hasClass('high')) {
                $(this).highlight(word);
            }
        });
    });
    return this;
};

DEMO

, .

Answer 2

Ctrl-F ( , , ), window.find Firefox, Chrome, Safari TextRange.findText IE.

, , :

function highlightText(str) {
    if (window.find)
        window.find(str);
    else if (window.TextRange && window.TextRange.prototype.findText) {
        var bodyRange = document.body.createTextRange();
        bodyRange.findText(str);
        bodyRange.select();
    }
}

, , CSS, ::selection.

:. DOM, : window.find , . (, s = window.getSelection().anchorNode s.parentNode == obj, s.parentNode.parentNode == obj ..). , . IE : document.body.createTextRange() obj.createTextRange().

Answer 3

$("body > *").each(function (index, element) {

  var parts = $(element).text().split("needle");
  if (parts.length > 1)
    $(element).html(parts.join('<span class="highlight">needle</span>'));
});

jsbin

, , ,

---

:

javascript, - DOM.

// gives "user"
alert(document.getElementById('user').innerHTML);

jQuery :

alert($('#user').html()); // same as above

$("a").each(function (index, element) {
    alert(element.innerHTML); // shows label text of every link in page
});

Answer 4

:

/[(<.+>)(^<)]*user[(^>)(<.*>)]/

:

<...> non-<.

.

EDIT:

:

/((<.+>)|(^<))*user((^>)|(<.*>))*/

Answer 5

, , . http://simplehtmldom.sourceforge.net/, . xhtml, SimpleXML php.

edit: javascript.

Answer 6

, JS Bin:

var s = 'hey <a href="#user">user</a>, what are you doing?';
s = s.replace(/(<[^>]*)user([^<]>)/g,'$1NEVER_WRITE_THAT_ANYWHERE_ELSE$2');
s = s.replace(/user/g,'Mr Smith');
s = s.replace(/NEVER_WRITE_THAT_ANYWHERE_ELSE/g,'user');
document.body.innerHTML = s;

, !

:

• "user", in a tag (which is easy to find) with a random string of your choice that you should never use again ... ever. A good option would be to replace it with your hash code (md5, sha-1, ...)
• Replace each remaining “user” space with the text you want.
• Replace your unique string with "user".

Answer 7

this code will separate all tags from sting

var s = 'hey <a href="#user">user</a>, what are you doing?';
s = s.replace(/<[^<>]+>/g,'');