Jquery - Replace text with tokens without affecting the HTML

Question

I'm trying to parse a DOM and replace parts of the text with tokens, for example detect an email then replace it with {{EMAIL}} string without changing the HTML Given the following HTML (for example, can be different):

<div dir="ltr" style="direction: ltr; text-align: left;">
   this is <span style="font-style:italic;">my</span>
    email <span title="bla@bla.com" style="font-weight:bold;">bla@bla.com&nbsp;</span>
</div>

How can I replace just the test portion so it to would be:

<div dir="ltr" style="direction: ltr; text-align: left;">
   this is <span style="font-style:italic;">my</span>
    email <span title="bla@bla.com" style="font-weight:bold;">{{EMAIL}}&nbsp;</span>
</div>

You mean using handlebars? Check it out here: http://handlebarsjs.com/ — Rax Weber, Oct 10 '16 at 14:26
Convert it how, what is that template supposed to do, and where does it come from? — adeneo, Oct 10 '16 at 14:26
Other than showing your work and what you have tried, please elaborate on what exactly you're trying to replace (or what "can be different" means) - is it always the whole content other than that last ` ` that's supposed to be replaced with the token? And why would you ever put a ` ` in there anyway? — TheThirdMan, Oct 10 '16 at 14:27
Possible duplicate of [Replace text in HTML page with jQuery](http://stackoverflow.com/questions/4886319/replace-text-in-html-page-with-jquery) — Heretic Monkey, Oct 10 '16 at 14:30
Yeah, you want to replace text in HTML with other text. That question's answers show you how. You haven't shown how your question is any different from that one. — Heretic Monkey, Oct 10 '16 at 14:35
Nop, if an email string exists in a title attribute for example, it will be replaced, which is not the desired output (not affecting the HTML) — Shlomi Schwartz, Oct 10 '16 at 14:49

score 1 · Answer 1 · answered Oct 10 '16 at 14:37

1

you could add an id="myspan" to the DOM element that you need to change and with the help of jquery change the innerHTML , like so:

HTML:

<div dir="ltr" style="direction: ltr; text-align: left;">
   this is <span style="font-style:italic;">my</span>
    email <span id="myspan" style="font-weight:bold;">{{EMAIL}}&nbsp;</span>
</div>

JS:

$('#myspan').innerHTML = "{{EMAIL}}&nbsp;";

answered Oct 10 '16 at 14:37

Theo Itzaris

4,321
3
37
68

thanks for the reply, however the HTML is not hard coded and could not have any idea on the tag, or have different innerHTML – Shlomi Schwartz Oct 10 '16 at 14:47
I'm giving you a +1 for your reply – Shlomi Schwartz Oct 10 '16 at 14:52

score 1 · Answer 2 · answered Oct 10 '16 at 15:29

1

You need to select element has title attribute and filter selected element using .filter() that select element has email address in title attribute. Then replace email address with new text.

$("div > [title]").filter(function(){
    return $(this).attr("title").match(/^[\w]+@[\w.]+\.[\w]+$/g);
}).text(function(i, text){
    return text.replace(/^[\w]+@[\w.]+\.[\w]+/g, "{{EMAIL}}");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div dir="ltr" style="direction: ltr; text-align: left;">
   this is <span style="font-style:italic;">my</span>
    email <span title="bla@bla.com" style="font-weight:bold;">bla@bla.com&nbsp;</span>
</div>

answered Oct 10 '16 at 15:29

Mohammad

21,175
15
55
84

Thanks for the reply, title is just an example. I have no control over the input HTML – Shlomi Schwartz Oct 10 '16 at 15:43
@ShlomiSchwartz You said *if an email string exists in a title attribute for example, it will be replaced*. The code work for any tag. – Mohammad Oct 10 '16 at 15:46
Regex would be the way to go if you need to find all instances of an email address written as text (although you *should* be annotating these tags with data attributes to indicate they contain the text that needs to be changed). Alternatively, I believe you could convert the entire DOM to a string, run regex on the entire string and use match groups to return all nodes containing email address(es) in their content. See the "CheatSheet" link at [regexr.com](http://regexr.com/) for more information on match groups and regex. – Ross Brasseaux Oct 10 '16 at 15:54
Regex could be a solution, but if the entire Dom is a string then email would be replaced in attributes to, when what I want is to replace just the text of a tag – Shlomi Schwartz Oct 10 '16 at 16:08
@ShlomiSchwartz `.text()` only return text of element and `text.replace()` only replace email in text. – Mohammad Oct 10 '16 at 16:11
@Mohammad what is the element looks like that a@a.com
some text . Wouldn't the
be removed? – Shlomi Schwartz Oct 10 '16 at 16:17
@ShlomiSchwartz That isn't a good think that you changed your question or your html after answering. Current code remove `br` from html but you can use `.html()` instead `.text()` that keep it. – Mohammad Oct 10 '16 at 16:25
@Mohammed, sorry for that. html() won't do, since it will return children that could potentially match the pattern. – Shlomi Schwartz Oct 10 '16 at 20:22

score 1 · Answer 3 · edited May 23 '17 at 12:02

1

If you need to find and replace texts, you can always use JQuery's :contains selector. Like the example found here: Find text string using jQuery?

You can get all occurrences of your desired string by using $('span:contains("bla@bla.com") or even *:contains if you are not searching for a specific tag.

After you got all your instances, you can do a text replace, as suggested by Mohammad

edited May 23 '17 at 12:02

Community

1
1

answered Oct 10 '16 at 15:48

Ant

1,083
1
15
35

1

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/low-quality-posts/15765498) – Julian Apr 06 '17 at 20:05
Obvious issue I didn't have thought. Thanks for pointing it out! – Ant Apr 06 '17 at 20:22

Jquery - Replace text with tokens without affecting the HTML

3 Answers3

HTML:

JS: