0

I have a field where the user can enter some text including links etc. Once the data is saved and the text should be previewed I need to format all the links to a certain inline style tag set on the <a href>. There is no option to use CSS so it should be inline.

Example entered text:Some text goes here. Please go to my web site, click here <a href="http://www.onewebsite.com" target="_blank">www.onewebsite.com</a>. Then some more text here…..with more links etc……

Example text when it’s previewed:Some text goes here. Please go to my web site, click here <a href="http://www.onewebsite.com" target="_blank" style="font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; color: #fa860b;">www.onewebsite.com</a>. Then some more text here…..with more links etc……

Note that style="font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; color: #fa860b;" is now added on the <a href>.

How is that possible to do with JavaScript in a simple way? it would be some kind of function like:

function formatPreview(myText){
  defaultStyle="style=\"font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; color: #fa860b;\"";
  myText = myText, find all a href and enter my defaultStyle 
  return myText
}

Please let me know. Thanks for your help.

user1984142
  • 1
  • 1
  • Why would you need JavaScript? This can be achieved with CSS. – Anthony Forloney Jan 16 '13 at 15:34
  • Hi - one very important comment is that the this will be used in an e-mail meaning that the style should be inline. So I don't have any access to jQuery and CSS. All the HREF links needs to have the STYLE tag added so the links will render probaly in all e-mail clients. – user1984142 Jan 16 '13 at 15:54

2 Answers2

1

No need to use regex for this. Simply add these styles to the link using jquery like this when you want to preview:

$("a[href='http://www.onewebsite.com']").css("font-family","Arial, Verdana, Helvetica, sans-serif"); 

$("a[href='http://www.onewebsite.com']").css("font-size","12px"); 

$("a[href='http://www.onewebsite.com']").css("color","#fa860b");

@Edit: Well, as many have already commented on my most, you need to include jquery library in your HTML code

@Edit 2: If you can put an ID to the achor tag, you can use the following javascript

<a id="a1" href=".."></a>

var element = document.getElementById("a1");

a1.style.fontFamily = "Arial, Verdana, Helvetica, sans-serif";

a1.style.fontSize = "12px";

a1.style.color = "#fa860b";
gurvinder372
  • 66,980
  • 10
  • 72
  • 94
  • And where is the jQuery tag or a reference to the library on the post? – epascarello Jan 16 '13 at 15:41
  • Not to mention it's completely wrong, looking for `Some text` – Niet the Dark Absol Jan 16 '13 at 15:45
  • Hi, I won't have access to jQuery so it needs to be done with JavaScript and maybe with RegEx? Is that possible..... – user1984142 Jan 16 '13 at 15:49
  • It can be done with Javascript too. Let me come up with the code for that. – gurvinder372 Jan 16 '13 at 15:49
  • Hi @gurvinder372, unfortunately I don't have any option to put in an ID either. For some reasons I'm very limited. All links is like this ....my site..... so I'm searching for a JavaScript function or RegEx that can do that for me since there is no option to use jQuery, CSS, getElementById etc. – user1984142 Jan 16 '13 at 18:52
  • Unless and until you have only one anchor tag, you need to give it a class or an Id, otherwise it won't be solved by regex either. Is it possible for you to wrap it in a div or

    tag and give them an id?

     – gurvinder372 Jan 17 '13 at 02:06
1

Why is there "no CSS option"? If you only want to affect links in the preview area, then (assuming your preview area has id="preview") just do this:

#preview a {
    font-family: 'Arial', 'Verdana', 'Helvetica', sans-serif;
    font-size: 12px;
    color: #fa860b;
}
Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
  • Hi, it's a preview process that will shown how the acutal text will look like. I can see that I forgot to mention that the text will be insereted into a html e-mail so that's the reason why I won't have access to jQuery and CSS linking. It's need to be inline style tag so the e-mail will render probaly in all e-mail clients. – user1984142 Jan 16 '13 at 15:51