RegExp for html-tag entrie

Question

I am writing javascript and I have to select some text using RegExp. Cheatsheets doesn't help me.

I have a text:

Some dummy text and nothing more.<address style='text-align: right;'><span style='color: #EA5528; font: 13px Arial !important;'>asd</span></address>

So I want to remove all besides text: address-tag and all what is inside. The expected result:

Some dummy text and nothing more.

Nothing completely, but I am novice in RegExps.

sp00m · Accepted Answer · 2013-11-15 15:20:31Z

1

If you can have nested address tags, a regexp will be quite hard to build.

If not, you could replace "<address .*?</address>" by "".

Javascript: .replace(/<address .*?<\/address>/g, "");

Otherwise, use a parser ;)

Some doc: http://www.regular-expressions.info/repeat.html, chapter "Laziness Instead of Greediness".

answered Nov 15, 2013 at 15:20

sp00m

49k31 gold badges152 silver badges263 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vlad Holubiev Over a year ago

.replace(/<address .*?<\/address>/g, "") is what I wanted. Works fine, thanks.

CodingIntrigue · Accepted Answer · 2013-11-15 15:43:35Z

1

How about making an element from the HTML and selecting the first child? Let your browser do the heavy lifting:

var elem = document.createElement();
elem.innerHTML = "Some dummy text and nothing more.<address style='text-align: right;'><span style='color: #EA5528; font: 13px Arial !important;'>asd</span></address>";
console.log(elem.firstChild.nodeValue);

jsFiddle

This creates an empty HTML element, then sets the HTML to your required HTML. Now your browser sees the whole thing as something like:

<Node>
    Some dummy text and nothing more.<address style='text-align: right;'><span style='color: #EA5528; font: 13px Arial !important;'>asd</span></address>
</Node>

Now, it also breaks down unrwapped text into "text nodes". So the firstChild of the Node element that you created would be the block of text (or pretty much anything that isn't HTML tags):

Some dummy text and nothing more.

edited Nov 15, 2013 at 15:43

answered Nov 15, 2013 at 15:25

CodingIntrigue

79k32 gold badges176 silver badges178 bronze badges

2 Comments

Vlad Holubiev Over a year ago

It works. But how? You create Element, than paste text with html and in the output I see only text, magic! What means document.createElement() without arguments?

CodingIntrigue Over a year ago

Added explanation. I guess I shouldn't be able to create an element with an empty tagName (that's the first argument to createElement), but it works. You could easily replace it with a placeholder element such as: document.createElement("span")

Kris · Accepted Answer · 2013-11-15 15:29:06Z

0

don't use regular expressions to parse html...

Get the node your text is in, loop over childNodes, skipping the address nodes, gather the innerText for remaining elements.

something like this might work:

var element = document.getElementById('message'),
    result = '', i = 0;

for (i = 0; i < element.childNodes.length; i ++)
{
    var e = element.childNodes.item(i);
    if (e is HTMLElement && e.localName.toUpperCase() == 'ADDRESS')
    {
        // skip these
    } else {
        result += e.innerText;
    }
}

Note that this is untested, typed in the SO textbox and provided to illustrate an idea, not to solve the worlds problems.

answered Nov 15, 2013 at 15:29

Kris

42.1k9 gold badges78 silver badges103 bronze badges

Collectives™ on Stack Overflow

RegExp for html-tag entrie

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related