How do I select the text and replace it using regex via jQuery?

Question

I've looked at a lot of stack posts and Google results but I can't quite find my answer... I have this snippet of text.

<p>Lorem [email protected] , consectetur adipisicing elit. Eos, doloribus, dolorem iusto blanditiis unde eius illum consequuntur neque dicta incidunt ullam ea hic porro optio ratione repellat</p>

I'm trying to target the email addresses and then underline them. It's important that the body is selected rather than the <p> tag. I've made an expression that I know works since I made it via RegexPlanet.

So far, I have this:

var result = $("body").text();
var newResult =result.replace("\b[\w\.-]+@[\w\.-]+\.\w{2,4}\b", "REPLACED");
console.log(newResult);

But it doesn't seem to work... If you go to this Here and then click JavaScript, you will see the result of input.replace(). That is essentially what I'm after but I'd also like to be able to use jQuery's .css() function.

How can I do this?

When you read the text and change it, it does not automatically map back to the element. You need to set the HTML back. And by using text() you will strip all HTML from the page. — epascarello
– epascarello, Commented Sep 27, 2015 at 1:37

Esteban Filardi · Accepted Answer · 2015-09-27 01:42:54Z

1

I could make it work by using html() instead of text(), changing the regex and reassigning the result to body:

var result = $("body").html();
var newResult = result.replace(/\b[\w\.-]+@[\w\.-]+\.\w{2,4}\b/g, "REPLACED");
$("body").html(newResult);

Instead of using "REPLACED" in the replace function you could use a function to surround the email within a span like this:

var newResult = result.replace(/\b[\w\.-]+@[\w\.-]+\.\w{2,4}\b/g,
    function (x) { return '<span class="underlined">' + x  + '</span>';});

edited Sep 27, 2015 at 1:42

answered Sep 27, 2015 at 1:21

Esteban Filardi

7363 gold badges18 silver badges31 bronze badges

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

2 Comments

ProEvilz Over a year ago

How could I edit my expression to do what it does right now but also make sure the domain of the email is always @xyz.com for instance? If the email address didn't contain @xyz.com then it would simply ignore it?

Esteban Filardi Over a year ago

/\b[\w\.-][email protected]\b/g

Pedro Lobito · Accepted Answer · 2015-09-27 01:55:11Z

0

Try this, without quotes on the regex:

var result = $("body").html();
var newResult = result.replace(/\b[\w\.-]+@[\w\.-]+\.\w{2,4}\b/ig, "REPLACED");
console.log(newResult);
//Lorem REPLACED , consectetur adipisicing elit.....

Notes:

Use $("body").html(); instead of $("body").text(); in order to keep the html tags.
Your regex is weak to match emails, try to improve it.

Demo:

http://codepen.io/anon/pen/epBvxG

answered Sep 27, 2015 at 1:55

Pedro Lobito

99.8k36 gold badges274 silver badges278 bronze badges

1 Comment

ProEvilz Over a year ago

How could I edit my expression to do what it does right now but also make sure the domain of the email is always @xyz.com for instance? If the email address didn't contain @xyz.com then it would simply ignore it?

Collectives™ on Stack Overflow

How do I select the text and replace it using regex via jQuery?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related